<template>
  <div style="margin: 20px" class="pro-demo">
    <pro-global-tooltip />
    <br />
    <el-card header="pro-action popover实例" shadow="hover">
      <div style="width: 400px">
          <el-form :model="test1.data">
              <pro-select
              uiType="tree"
              :lazy="true"
              v-model="test1.data.v"
              label="Tree按需加载"
              :dataSource="ccccccccccccccccc"
              labelWidth="130px"
            />

          </el-form>
        <br/>

        <pro-action importUrl="/mock/uploadFile"  text="beforeHandler" :beforeHandler="() => xpromise.resolve(' 数据已经审核，你无法操作')"></pro-action>

        <pre>
          当pro-action 指定 popover=true时 此时的pro-action行为等价于 el-popover

          两种处理方式:

          第一种:
          &lt;pro-action :xpopover=&quot;true&quot; toComponentUrl=&quot;test-poper&quot;&gt;&lt;/pro-action&gt;
         </pre>
        <pro-action :xpopover="true" toComponentUrl="test-poper" text="测试popover"></pro-action>
      </div>
      <br/>
      <div>
        <pre>
           两种处理方式:
           第二种: 
           &lt;pro-action :xpopover=&quot;true&quot;text=&quot;测试popover&quot;&gt;
          &lt;div slot=&quot;popover&quot; style=&quot;padding: 50px;background-color: #ffffff&quot;&gt;
            mars-pro pro-action
          &lt;/div&gt;
        &lt;/pro-action&gt;
         </pre>
        <pro-action :xpopover="true" text="测试popover">
          <div slot="popover" style="padding: 50px;background-color: #ffffff">
            mars-pro pro-action
          </div>
        </pro-action>
      </div>

    </el-card>
     <br />
    <el-card header="pro-select-tags实例" shadow="hover">
      <el-form :model="test.data">
        <pro-layout-contaner :columnCount="1" style="width: 800px">
          <pro-select
            mode="popper"
            label="热门词条-单选"
            labelWidth="130px"
            uiType="tags"
            :dataSource="getDataSourceTags"
            size="small"
            v-model="test.data.selectTags"
          />
          <pro-layout-formitem label="已选择" labelWidth="130px">{{
            test.data.selectTags
          }}</pro-layout-formitem>
          <pro-select
            mode="popper"
            label="热门词条-多选"
            labelWidth="130px"
            uiType="tags"
            selectModel="multiple"
            :dataSource="getDataSourceTags"
            size="small"
            v-model="test.data.selectTags1"
          />
          <pro-layout-formitem label="已选择" labelWidth="130px">{{
            test.data.selectTags1
          }}</pro-layout-formitem>
          <pro-select
            label="热门词条-单选"
            labelWidth="130px"
            uiType="tags"
            :dataSource="getDataSourceTags"
            size="small"
            v-model="test.data.selectTags2"
          />
          <pro-layout-formitem label="已选择" labelWidth="130px">{{
            test.data.selectTags2
          }}</pro-layout-formitem>
          <pro-select
            label="热门词条-多选"
            labelWidth="130px"
            uiType="tags"
            selectModel="multiple"
            :dataSource="getDataSourceTags"
            size="small"
            v-model="test.data.selectTags3"
          />
          <pro-layout-formitem label="已选择" labelWidth="130px">{{
            test.data.selectTags3
          }}</pro-layout-formitem>
        </pro-layout-contaner>
      </el-form>
    </el-card>
    <br />
    <br />
    <el-card header="dataSource mixins 处理方案" shadow="hover">
      <pre>
            dataSource是什么?
              前端开发，我经常需要实现调用后端接口取数据的业务, 例如:

              import {post, get, postForm} from 'mars-pro/lib/pro/request';

              data(){
                return {
                  userList: []
                }
              }
              methods:{
                 await getData(){
                   //发起请求
                   const {response, err} = await post('/mock/queryUserlist', {query: 'xiufu.wang'}).done()
                   if (response){
                     //将后端返回结果赋值给状态
                     this.userList = response.data.list
                     
                     以下可能还有其他的业务逻辑
                     。。。。。
                     。。。。。
                     
                   }  

                 }
              }

              基于以上的代码，我们不难分析出，这类业务的逻辑代码思路都是一样的，不管你在页面中写多少次,都是一样的，ok
              既然是这样的话，那我们是否可以制定一个范式标准, 让大家尽可能的简化这部分开发逻辑, 所以这也是dataSource要
              解决的问题:

              1. 场景1： 页面有很多控件 都需要数据源, 可以极大简化代码开发量
              2. 场景2： 支持从数据字典中取数据
              3. 场景3： 支持按需模式, 避免初始化阶段、交互阶段没必要的接口调用
              4. 场景4：支持单例模式， 多个控件可以共用一个数据源, 
              5. 场景5： 支持数据源多实例模式，例如明显列表表单中, 如果某一个数据源控件被级联
              6. 场景6： 支持与mars-pro控件适配
              7. 场景7：支持集合数据结构及tree数据结构的 字段转换
              8. 场景8：支持一些场景业务处理：array转 tree， 分组

        </pre
      >

      <div style="font-weight: 700">target指定静态数据</div>
      <pre>
代码
dataSource("testDatasourcex1",
  { name: "mars-pro-name", code: "mars-pro-code" },
  {}
)

运行结果(testDatasourcex1.datas 获取原始数据): 

{{ testDatasourcex1.datas }}
</pre
      >

      <div style="font-weight: 700">target 字典数据</div>
      <pre>
代码
dataSource("testDatasourcex2", 'YES_OR_NOT', {})

运行结果(testDatasourcex2.datas 获取原始数据): 

{{ testDatasourcex2.datas }}
</pre
      >

      <div style="font-weight: 700">target 接口</div>
      <pre>
代码
dataSource("testDatasourcex3", '/mock/getStaticSelectList', {})

运行结果(testDatasourcex3.datas 获取原始数据): 

{{ testDatasourcex3.datas }}

如果你指定了dataField、fieldMap
dataSource("testDatasourcex3001", '/mock/getStaticSelectList', {dataField: 'list', fieldMap: {name: 'label', code: 'value'}}):
运行结果:
{{ testDatasourcex3001.formatDatas }}
</pre
      >

<div style="font-weight: 700">target 指定本地函数</div>
<pre>
代码
dataSource("testDatasourcex4", 'getLocalSelectDatas', {})

运行结果(testDatasourcex4.datas 获取原始数据): 

{{ testDatasourcex4.datas }}

</pre>

<div style="font-weight: 700">多实例处理: 推荐使用clone方法,而不是 pro-dataSource高级组件处理(继续支持)</div>
<pre>
  以pro-select控件为例

  单例模式运行如下:

 <el-form :model="test2.data">
    <pro-layout-contaner :columnCount="2">
           <pro-select
            uiType="list"
            v-model="test2.data.select511"
            label=" select"
            :dataSource="testDatasourcex5"
            labelWidth="110px"
          />
           <pro-select
            uiType="list"
            v-model="test2.data.select512"
            label="select"
            :dataSource="testDatasourcex5"
            labelWidth="110px"
          />
    </pro-layout-contaner>
   
   多例模式运行如下clone:


    <pro-layout-contaner :columnCount="2">
           <pro-select
            uiType="list"
            v-model="test2.data.select5111"
            label=" select"
            :dataSource="testDatasourcex5.clone('dddddd')"
            labelWidth="110px"
          />
           <pro-select
            uiType="list"
            v-model="test2.data.select5122"
            label="select"
            :dataSource="testDatasourcex5.clone('aaaaaaaaaaaaa')"
            labelWidth="110px"
          />
    </pro-layout-contaner>

    多例模式运行如下:

    <pro-layout-contaner :columnCount="2">
           <pro-select
            uiType="list"
            v-model="test2.data.select51111"
            label=" select"
            dataSource="/mock/getStaticSelectList"
            dataField="list"
            labelWidth="110px"
          />
           <pro-select
            uiType="list"
            v-model="test2.data.select51222"
            label="select"
            dataSource="/mock/getStaticSelectList"
            dataField="list"
            labelWidth="110px"
          />
    </pro-layout-contaner>

单例模式运行如下dataSourceKey:
<pro-layout-contaner :columnCount="2">
           <pro-select
            uiType="list"
            v-model="test2.data.select511111"
            label=" select"
            dataSource="/mock/getStaticSelectList"
            dataSourceKey="getStaticSelectList-one"
            dataField="list"
            labelWidth="110px"
          />
           <pro-select
            uiType="list"
            v-model="test2.data.select512222"
            label="select"
            dataSource="/mock/getStaticSelectList"
            dataSourceKey="getStaticSelectList-one"
            dataField="list"
            labelWidth="110px"
          />
    </pro-layout-contaner>


 </el-form>

</pre>

    </el-card>
    <br />
    <el-card header="pro-action importUrl 数据导入" shadow="hover">
        <pro-action 
          icon="svg-icon-upload-filled" 
          importUrl="/mock/uploadFile" 
          text="某某导入" 
          :params="{name: 'mars-pro'}"
          filename="hellow"
          @handler="this.uploadCallback"/>
    </el-card>
    <br />
    <el-card header="pro-form-list tables 明细表格处理方案" shadow="hover">
      <el-form :model="test2.data">
         <pro-form-list
          emptyText="暂无订单信息"
          prop="detalData3s"
          dataKey="id"
          type="tables"
        >
          <pro-input label="编号" uiType="text" prop="no" width="200px" is-edit/>
          <pro-input label="名称" uiType="text" prop="name" width="200px" is-edit/>
          <div label="类型" prop="desc" width="200px">  物品订单 </div>
         <pro-select
            label="是否"
            uiType="list"
            dataSource="YES_OR_NOT"
            labelWidth="150px"
            :fieldMap="{ label: 'name', value: 'code' }"
            prop="yes1"
            is-edit
          />
          <pro-input label="备注" uiType="text" prop="bak"  is-edit/>
          <div use-def="action1" label="自定义操作" labelWidth="200px" prop="userOpt"/>
          <template slot="action1" slot-scope="{scope, rowIndex}">
            <div>
                <pro-action uiType="link" text="删除" @handler="scope.$parent.removeItem({index: rowIndex})"></pro-action>
                <pro-action uiType="link" text="删除1" @handler="scope.$parent.removeItem({index: rowIndex})"></pro-action>
            </div>
          </template>
        </pro-form-list>
       </el-form>
    </el-card>
    <br />
    <el-card header="pro-form-list files 明细表单附件处理方案" shadow="hover">
      <pro-action :text="test2.data.enableDetail1111 ? '关闭详情模式' : '开启详情模式'" @handler="test2.data.enableDetail1111 = !test2.data.enableDetail1111"/>
       <el-form :model="test2.data" :enableDetail="test2.data.enableDetail1111">
         <pro-form-list
          prop="detalData2s"
          dataKey="id"
          :multiple="true"
          type="files"
          :enableDetail="test2.data.enableDetail22"
        >
          <pro-input label="附件名称" uiType="text" prop="name" width="200px"/>
          <div label="大小(kb)" prop="kbsize" width="100px" is-text> </div>
          <div label="扩展名" prop="extName" width="100px" is-text> </div>
          <div label="自定义" prop="customer" width="100px">自定义 </div>
          <pro-input label="备注" uiType="email" prop="bak"/>
        </pro-form-list>
       </el-form>
    </el-card>
    <br />
    <el-card header="pro-form-list form明细表单处理方案" shadow="hover">
      <pre>
          表单隐现、数据级联 可以使用 @itemChange 和 renderItem(Function) 组合完成
          1. 隐显处理实例: 当input1输入1时, 隐藏input2
              &lt;pro-form-list prop=&quot;detalDatas&quot; dataKey=&quot;id&quot; :renderItem=&quot;renderItem1&quot;&gt;
              
              renderItem1逻辑如下

              renderItem1({ index, prop, value, propModel }) {
                return {
                  // input的prop=name  input2的prop=name1
                  vShow: !(propModel.name === "1" && prop === "name1"),
                };
              }
           2. 级联
              &lt;pro-form-list prop=&quot;detalDatas&quot; dataKey=&quot;id&quot; @itemChange=&quot;handleItemChange&quot;&gt;

              handleItemChange({
                // 最新值
                value,
                // 序号
                index,
                // prop属性
                prop,
                // model对象
                model,
                //当前行model
                propModel,
                //集合model
                arrsModel,
                //vnode: 主要是为了获取vnode.componentInstance
                getComponentInstance
              }){
                //选择框 prop=name2
                if (prop="name2"){
                  // 获取select数据源对象
                  const dataSource = getComponentInstance().$refs.proselect.realDataSource
                  //如果要获取其他列的select数据源,可以给getComponentInstance传递prop属性
                  const otherDataSource = getComponentInstance('name3').$refs.proselect.realDataSource
                }
              }

              3. 如果项自定义分组格式
                首先定义一个占位符div, 需要给div 定义个use-def属性:这里将userDefine
                  
                  &lt;div use-def="userDefine"&gt; &lt;/div&gt;

                其实我们在定义一个 userDefine 作用域插槽:
                  &lt;template slot=&quot;userDefine&quot; slot-scope=&quot;{ propModel, modelProp }&quot;&gt;
                    &lt;pro-layout-formitem
                      label=&quot;group&quot;
                      labelWidth=&quot;100px&quot;
                      :prop=&quot;modelProp + &#x27;.name5&#x27;&quot;
                      style=&quot;margin-bottom: 0px&quot;
                    &gt;
                      &lt;pro-layout-contaner
                        :columnCount=&quot;2&quot;
                        :gutter=&quot;10&quot;
                        :enableBottomGutter=&quot;false&quot;
                      &gt;
                        &lt;pro-input uiType=&quot;text&quot; v-model=&quot;propModel.name5&quot; /&gt;
                        &lt;pro-input uiType=&quot;text&quot; v-model=&quot;propModel.name6&quot; /&gt;
                      &lt;/pro-layout-contaner&gt;
                    &lt;/pro-layout-formitem&gt;
                  &lt;/template&gt;

                  如果需要对分组区域的组件集合做 级联操作,最简单方式时 将group 中的两个input框单独封装为一个组件，
                  在组件内部编写交互逻辑

      </pre>
      <el-form :model="test2.data">
        <pro-form-list
          prop="detalDatas"
          dataKey="id"
          @itemChange="handleItemChange"
          :renderItem="renderItem1"
        >
          <pro-input
            uiType="text"
            label="input1"
            labelWidth="100px"
            prop="name"
          />
          
          <div use-def="userDefine"></div>
          <pro-input
            uiType="text"
            label="input2"
            labelWidth="100px"
            prop="name1"
          />
          <pro-select
            uiType="list"
            label="select"
            :multiple="true"
            :remoteFilter="true"
            dataSource="/mock/getStaticQuerySelectList"
            singleQueryField="query"
            dataField="list"
            labelWidth="100px"
            prop="name2"
          />
          <pro-input
            uiType="text"
            label="input"
            labelWidth="100px"
            prop="name3"
          />
          <pro-input
            uiType="text"
            label="input"
            labelWidth="100px"
            prop="name4"
          />
          <template slot="userDefine" slot-scope="{ propModel, modelProp }">
            <pro-layout-formitem
              label="group"
              labelWidth="100px"
              :prop="modelProp + '.name5'"
              style="margin-bottom: 0px"
            >
              <pro-layout-contaner
                :columnCount="2"
                :gutter="10"
                :enableBottomGutter="false"
              >
                <pro-input uiType="text" v-model="propModel.name5" />
                <pro-input uiType="text" v-model="propModel.name6" />
              </pro-layout-contaner>
            </pro-layout-formitem>
          </template>
        </pro-form-list>
      </el-form>
    </el-card>
    <el-card header="pro-ellipsis-text详情组件" shadow="hover">
      <pre>
          如果为普通文本且maxLines=1 则启用原生css模式来处理
       </pre>
      <div style="width: 300px;background: #ececec;">
        <pro-ellipsis-text text="
        1fadfadfasdfafdadsfafdafdafdafasdfasdfafdadsfafdafddfasdfafdadsfafdafddfadsffadfadfasdfafdadsfafdafdafdafasdfasdfafdadsfafdafddfasdfafdadsfafdafddfadsffadfadfasdfafdadsfafdafdafdafasdfasdfafdadsfafdafddfasdfafdadsfafdafddfadsf
        "/>
      </div>
       <pre>
          如果浏览器支持clamp, 且仅指定maxLines、useRichText，则会启动native模式
          <pro-action @handler="test2.data.maxLines = (test2.data.maxLines || 1) + 1" text="行数+1" />
          <pro-action @handler="test2.data.maxLines = (test2.data.maxLines || 1) - 1" text="行数-1" />
      </pre>
      <div style="width: 300px;background: #ececec;">
        <pro-ellipsis-text :maxLines="test2.data.maxLines" text="
        2fadfadfasdfafdadsfafdafdafdafasdfasdfafdadsfafdafddfasdfafdadsfafdafddfadsffadfadfasdfafdadsfafdafdafdafasdfasdfafdadsfafdafddfasdfafdadsfafdafddfadsffadfadfasdfafdadsfafdafdafdafasdfasdfafdadsfafdafddfasdfafdadsfafdafddfadsf
        "/>
       
      </div>
       <br/>
       
      <div style="width: 300px;background: #ececec;">
        <pro-ellipsis-text :maxLines="test2.data.maxLines" text="
            2fadfadfasdfafddf
        "/>
      </div>
        <br/>
      <pre>
           如果浏览器支持clamp, 且仅指定maxLines、useRichText，则会启动native模式 --<b>富文本</b>
          <pro-action @handler="test2.data.maxLines1 = (test2.data.maxLines1 || 1) + 1" text="行数+1" />
          <pro-action @handler="test2.data.maxLines1 = (test2.data.maxLines1 || 1) - 1" text="行数-1" />
      </pre>
      <div style="width: 300px;background: #ececec;">
        <pro-ellipsis-text useRichText :maxLines="test2.data.maxLines1" :text="test2.data.text2"/>
      </div>
      <br/>
       <br/>
      <div style="width: 300px;background: #ececec;">
        <pro-ellipsis-text useRichText :maxLines="test2.data.maxLines1" :text="test2.data.text3"/>
      </div>

      <pre>
          <pro-action @handler="test2.data.maxLines2 = (test2.data.maxLines2 || 1) + 1" text="行数+1" />
          <pro-action @handler="test2.data.maxLines2 = (test2.data.maxLines2 || 1) - 1" text="行数-1" />
      </pre>
      <div style="width: 30%;background: #ececec;">
        <pro-ellipsis-text @reflow="onReflow" :maxLines="test2.data.maxLines2" text="啊发啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法的撒法"/>
      </div>
      <br/>
      <div style="width: 30%;background: #ececec;">
        <pro-ellipsis-text @reflow="onReflow" :maxLines="test2.data.maxLines2" text="啊发啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法啊发的撒法的撒法">
          <template slot="ellipsisNode">
              <a href="javascript: void(0)">更多</a>
          </template>
        </pro-ellipsis-text>
      </div>
      <br/>
      
      <div style="width: 30%;background: #ececec;">
        <pro-ellipsis-text @reflow="onReflow" text="啊发的撒法"/>
      </div>
    </el-card>
    <br/>
     <el-card header="pro-detail详情组件" shadow="hover">
      <pre> 
          有以下诉求:

          1. 需要从字典转义、数据源转义

          2. 开发表单详情页面时 想直接复用 表单编辑页面

          业务处理逻辑:

          1.  什么叫做反显
            这个主要针对select 控件, 因为 详情接口一般值返回 value, 可是select控件不能显示给
            value给用户看，而应该转义成正确的label, 

          2. 有了value,如何解析数据源，并且从数据源中获取value对应的label呢？
            
              关于这个问题，我们做了以下约定:
                a. 服务端详情接口可以同时返回value和label，例如产品类型
                   {
                     statusCode: 1, //状态码
                     statusCodeAsText: '成功' // label字段统一加一个 "AsText" 后缀
                   } 

                  于是将这部分约定定义在el-from 的 detailModel属性上:
                  &lt;el-form :detailModel=&quot;useDetail&quot;&gt;&lt;/el-form&gt;
                  
                  样例:
                  &lt;el-form :model="formData" :detailModel=&quot;{statusCode: 1, statusCodeAsText: '成功'}&quot;&gt;
                    &lt;pro-select v-model=&quot;formData.statusCode&quot; prop=&quot;statusCode&quot;&gt;
                    若formData.statusCode值为 1 ,那么 select并不会优先调用数据源取获取label，而是从el-form中
                    根本prop属性找到statusCodeAsText字段，并获取label用于反显
                  &lt;/el-form&gt;

                b. 通常情况下，前端会缓存一些数据, 例如 '字典数据', 如果待转义的value来自于字典
                   那么a中的场景就不需要 'xxAsText' 多余的字段
          
                    {
                      // YES_OR_NOT 来自于本地缓存字典数据
                      mixins:[dataSource('fromDictDs', 'YES_OR_NOT', {....})]
                    }

                    &lt;el-form :model="formData" &gt;
                    &lt;pro-select v-model=&quot;formData.statusCode&quot; prop=&quot;statusCode&quot;&gt;
                       这个时候select label会从 字典 YES_OR_NOT 获取
                    &lt;/el-form&gt;


                c. value本身可以是一个类似这样的{value: 1, label: '成功'}对象结构，那么value转义
                   可以直接从value中取label

                     &lt;el-form :model="formData" &gt;
                     &lt;pro-select v-model=&quot;formData.statusCode&quot; prop=&quot;statusCode&quot;&gt;
                        若formData.statusCode为 {statusCode: 1, statusCodeAsText: '成功'}, label会直接从value中
                        获取，并且会自定格式化formData.statusCode为1
                     &lt;/el-form&gt;


                d. 如果以上都找不到对应的label,那么将通过解析dataSource数据源，并尝试从这个里获取
                   label, 而dataSouce既可以指定本地缓存字典，也可以只当服务端接口地址，或者是自定义
                   数据, <span style="color: red;">(这种模式不支持分页下拉数据,因为我们无法确定value在哪一个范围)</span>
                    {
                      // YES_OR_NOT 来自于本地缓存字典数据
                      mixins:[dataSource('fromDictDs', '/api/getDatas', {....})]
                    }

                    &lt;el-form :model="formData" &gt;
                    &lt;pro-select v-model=&quot;formData.statusCode&quot; prop=&quot;statusCode&quot;&gt;
                       若formData.statusCode=1 没办法，只能尝试调用接口/api/getDatas取获取label
                    &lt;/el-form&gt;

            
      </pre>
      <h4>pro-detail单独使用, 实例详见如下:</h4>
      <pro-layout-contaner>
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
&lt;pro-detail value=&quot;2022-09-30 12:12:12&quot; detailValueType=&quot;date&quot; format=&quot;yyyy-MM-dd&quot;&gt;&lt;/pro-detail&gt;
&lt;br/&gt;
&lt;pro-detail :value=&quot;[&#x27;2022-09-20 12:12:12&#x27;, &#x27;2022-09-30 12:12:12&#x27;]&quot; detailValueType=&quot;date-range&quot; format=&quot;yyyy-MM-dd&quot;&gt;&lt;/pro-detail&gt;
&lt;br/&gt;
&lt;pro-detail :value=&quot;[100, 200]&quot; detailValueType=&quot;number-range&quot;&gt;&lt;/pro-detail&gt;
          
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              运行如下:
             <pro-detail value="2022-09-30 12:12:12" detailValueType="date" format="yyyy-MM-dd"></pro-detail>
              <br/>
              <pro-detail :value="['2022-09-20 12:12:12', '2022-09-30 12:12:12']" detailValueType="date-range" format="yyyy-MM-dd"></pro-detail>
              <br/>
              <pro-detail :value="[100, 200]" detailValueType="number-range"></pro-detail>
          </pre>

        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              (普通文本):
              &lt;pro-detail value=&quot;1234567&quot;&gt;&lt;/pro-detail&gt;
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              运行如下:
             <pro-detail value="1234567"></pro-detail>
          </pre>
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              (普通文本):
               &lt;pro-detail value=&quot;1234567&quot;&gt;
               &lt;template slot-scope=&quot;result&quot;&gt;
                  &lt;span&gt;你好: {result[0]}&lt;/span&gt;
               &lt;/template&gt;
              &lt;/pro-detail&gt;
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
             运行如下:
             <pro-detail value="1234567">
               <template slot-scope="result">
                  <span>你好: {{result[0]}}</span>
               </template>
             </pro-detail>
          </pre>
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              (数字千分位):
               &lt;pro-detail value=&quot;1234567&quot; detailValueType=&quot;number&quot; :thousands=&quot;true&quot;/&gt;
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid #a48484;
            background: aliceblue;
            padding: 10px;
          "
        >
             运行如下:
             <pro-detail value="1234567" detailValueType="number" :thousands="true"/>
          </pre>
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              (数字单位):
               &lt;pro-detail value=&quot;1234567&quot; :rate=&quot;10000&quot; detailValueType=&quot;number&quot; :thousands=&quot;true&quot;&gt;
               &lt;template slot-scope=&quot;result&quot;&gt;
                  &lt;span&gt;{result[0]}万元&lt;/span&gt;
               &lt;/template&gt;
             &lt;/pro-detail&gt;
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
             运行如下:
             <pro-detail value="1234567" :rate="10000" detailValueType="number" :thousands="true">
               <template slot-scope="result">
                  <span>{{result[0]}} 万元</span>
               </template>
             </pro-detail>
          </pre>
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              (数字单位-精度):
               &lt;pro-detail :decimal=&quot;2&quot; value=&quot;1234567&quot; :rate=&quot;10000&quot; detailValueType=&quot;number&quot; :thousands=&quot;true&quot;&gt;
               &lt;template slot-scope=&quot;result&quot;&gt;
                  &lt;span&gt;{result[0]}万元&lt;/span&gt;
               &lt;/template&gt;
             &lt;/pro-detail&gt;
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
             运行如下:
             <pro-detail :decimal="2" value="1234567" :rate="10000" detailValueType="number" :thousands="true">
               <template slot-scope="result">
                  <span>{{result[0]}} 万元</span>
               </template>
             </pro-detail>
          </pre>
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              (字典数据):
               如果字典数据不类似于{value, label},那么需要转换:fieldMap=&quot;{...}&quot; ,当然字典数据结构都是一样的，所以可以在全局
               pro-config-provider中全局配置dictFieldMap, 所以可以直接引入:fieldMap=&quot;dictFieldMap&quot;

               &lt;pro-detail detailType=&quot;select&quot; value=&quot;2&quot; dataSource=&quot;YES_OR_NOT&quot; :fieldMap=&quot;{label: &#x27;name&#x27;, value: &#x27;code&#x27;}&quot;/&gt;

                &lt;pro-detail detailType=&quot;select&quot; value=&quot;2&quot; dataSource=&quot;YES_OR_NOT&quot; :fieldMap=&quot;dictFieldMap&quot;/&gt;
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
             运行如下:
             <pro-detail detailType="select" value="1" dataSource="YES_OR_NOT" :fieldMap="{label: 'name', value: 'code'}"/>
             引入:dictFieldMap
             <pro-detail detailType="select" value="2" dataSource="YES_OR_NOT" :fieldMap="dictFieldMap"/>
          </pre>
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              (服务接口):
              
              &lt;pro-detail detailType=&quot;select&quot; :value=&quot;1&quot; dataSource=&quot;/mock/getStaticSelectList&quot; dataField=&quot;list&quot;/&gt;

              &lt;pro-detail detailType=&quot;select&quot; :value=&quot;[1,2]&quot; dataSource=&quot;/mock/getStaticSelectList&quot;  dataField=&quot;list&quot;/&gt;
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
             运行如下:

             <pro-detail detailType="select" :value="1" dataSource="/mock/getStaticSelectList" dataField="list"/>
             
             数组:

             <pro-detail detailType="select" :value="[1,2]" dataSource="/mock/getStaticSelectList"  dataField="list"/>
          </pre>

        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
              (来自于Value对象):
              
              &lt;pro-detail detailType=&quot;select&quot; :value=&quot;{value: 1, label: &#x27;选项1&#x27;}&quot;/&gt;
          </pre
        >
        <pre
          :span="12"
          style="
            border: 1px solid rgb(164, 132, 132);
            background: aliceblue;
            padding: 10px;
            overflow: auto;
          "
        >
             运行如下:

             <pro-detail detailType="select" :value="{value: 1, label: '选项1'}"/>
            </pre>
      </pro-layout-contaner>
      <h4>pro-input 、pro-select也集成了pro-detail, 实例详见如下:</h4>
      <pre>
         基本用法:
          
        &lt;el-form :model=&quot;test2.data&quot; :enableDetail=&quot;test2.data.enableDetail&quot;&gt;
        &lt;pro-action @handler=&quot;test2.data.enableDetail =!test2.data.enableDetail&quot; :text=&quot;test2.data.enableDetail ? &#x27;关闭详情模式&#x27; : &#x27;启用详情模式&#x27;&quot;/&gt;
        &lt;pro-layout-contaner :columnCount=&quot;3&quot;&gt;
            &lt;pro-input uiType=&quot;text&quot; v-model=&quot;test2.data.input1&quot; label=&quot;输入&quot; labelWidth=&quot;100px&quot; /&gt;
            &lt;pro-input uiType=&quot;number&quot; :decimal=&quot;2&quot; v-model=&quot;test2.data.input2&quot;  label=&quot;数字&quot; labelWidth=&quot;100px&quot; /&gt;
            &lt;pro-input uiType=&quot;date&quot; v-model=&quot;test2.data.input3&quot;  label=&quot;日期&quot; labelWidth=&quot;100px&quot; /&gt;
        &lt;/pro-layout-contaner&gt;
        &lt;/el-form&gt;
        
       </pre
      >
      <el-form :model="test2.data" :enableDetail="test2.data.enableDetail">
        <pro-action
          @handler="test2.data.enableDetail = !test2.data.enableDetail"
          :text="test2.data.enableDetail ? '关闭详情模式' : '启用详情模式'"
        />
        <pro-layout-contaner :columnCount="3">
          <pro-input
            uiType="text"
            v-model="test2.data.inputx1"
            label="详情"
            labelWidth="100px"
          >
          </pro-input>
          <pro-input
            uiType="text"
            v-model="test2.data.inputx2"
            :showEllipsis="true"
            label="详情单行"
            labelWidth="100px"
          >
            <pro-action
              text="详情"
              slot="fappend"
              @handler="$alert('测试')"
            ></pro-action>
          </pro-input>
          <pro-input
            uiType="text"
            v-model="test2.data.inputx3"
            :showEllipsis="true"
            label="详情2行"
            labelWidth="100px"
            :maxLines="2"
          >
          </pro-input>
          <pro-input
            uiType="text"
            v-model="test2.data.inputx4"
            :showEllipsis="true"
            label="详情1行"
            labelWidth="100px"
            :maxLines="2"
          >
            <a slot="ellipsisNode" href="#"> 更多 </a>
          </pro-input>
          <pro-input
            uiType="number"
            :decimal="2"
            v-model="test2.data.inputx5"
            label="数字"
            labelWidth="100px"
          />
          <pro-input
            uiType="number-range"
            :decimal="2"
            v-model="test2.data.inputddax5"
            label="数字端"
            labelWidth="100px"
          >
            <span slot-scope="values">
              最小值是: {{ values[0] }}, 最大值:{{ values[1] }}
            </span>
          </pro-input>
          <pro-input
            uiType="date-range"
            format="yyyy-MM-dd"
            v-model="test2.data.inputx6"
            label="日期端"
            labelWidth="100px"
          >
            <span slot-scope="values">
              最小日期: {{ values[0] }}, 最大日期:{{ values[1] }}
            </span>
          </pro-input>
          <pro-input
            uiType="date"
            format="yyyy-MM-dd"
            v-model="test2.data.inputxaa6"
            label="日期"
            labelWidth="100px"
          />

          <pro-input
            uiType="autocomplete"
            label="联想"
            labelWidth="100px"
            :dataSource="useResponseAutoCompelete"
            v-model="test2.data.inputxxxx4"
          />
          <pro-select
            uiType="list"
            v-model="test2.data.selectx7"
            label="list select"
            :fieldMap="{ label: 'name', value: 'code', ddd: 'name' }"
            :multiple="true"
            dataSource="SEX"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            v-model="test2.data.selectx8"
            label="多选 select"
            selectModel="multiple"
            :multiple="true"
            :fieldMap="{ label: 'name', value: 'code' }"
            dataSource="YES_OR_NOT"
            labelWidth="110px"
          />
          <pro-input
            uiType="textarea"
            :span="12"
            label="多行文本"
            labelWidth="110px"
            v-model="test2.data.inputx9"
            :rows="10"
          />
          <pro-input
            uiType="textarea"
            :span="12"
            label="多行文本(showEllipsis)"
            labelWidth="110px"
            :showEllipsis="true"
            v-model="test2.data.inputx10"
            :maxLines="3"
            :rows="10"
          />
        </pro-layout-contaner>
      </el-form>
    </el-card>
     <br />
    <online-render />
    <el-card header="pro-select反显处理" shadow="hover">
      <el-form
        :model="test1.data"
        :detailModel="{
          selectVv3: 3,
          selectVv3AsText: '选项3',
          selectVv31: [2, 4],
          selectVv31AsText: ['选项2', '选项4'],
        }"
      >
        <p>
          表单项反显逻辑1.<br />
          单选:<br />
          v-model="test1.data.selectVv1" <br />
          其中 test1.data.selectVv1 为 {value1: 1, label: '选项1'}
          <br />多选:<br />
          v-model="test1.data.selectVv11" <br />
          其中 test1.data.selectVv11 为 [{value: 2, label: '选项2'}, {value: 3,
          label: '选项3'}]
        </p>
        <pro-layout-contaner :columnCount="3" :gutter="10">
          <pro-select
            uiType="list"
            v-model="test1.data.selectVv1"
            label="反显场景1(单选)"
            :dataSource="staticServerSelectList"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            v-model="test1.data.selectVv11"
            label="反显场景1(多选)"
            selectModel="multiple"
            :dataSource="staticServerSelectList"
            labelWidth="110px"
          />
        </pro-layout-contaner>
        <br />
        <br />
        <p>
          表单项反显逻辑2.<br />
          单选<br />
          v-model="test1.data.selectVv2" <br />
          其中 test1.data.selectVv2 为 2 <br />
          多选<br />
          v-model="test1.data.selectVv21" <br />
          其中 test1.data.selectVv21 为 [2,4] <br />
        </p>
        <pro-layout-contaner :columnCount="3" :gutter="10">
          <pro-select
            uiType="list"
            v-model="test1.data.selectVv2"
            label="反显场景2"
            :dataSource="staticServerSelectList"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            v-model="test1.data.selectVv21"
            label="反显场景2(多选)"
            :dataSource="staticServerSelectList"
            selectModel="multiple"
            labelWidth="110px"
          />
        </pro-layout-contaner>
        <br />
        <br />
        <p>
          表单项反显逻辑3.<br />
          单选<br />
          el-form detailModel="{selectVv3: 3, selectVv3AsText: '选项3',
          selectVv31: [2,4], selectVv3AsText: ['选项2', '选项4']}" <br />
          其中 test1.data.selectVv3 为 3 , 此时选择框会从elform上的
          detailModel中获取selectVv3AsText [AsText是规范] 作为当前表单项的label
          <br />
          多选<br />
          其中 test1.data.selectVv31 为 [2,4] , 此时选择框会从elform上的
          detailModel中获取selectVv31AsText [AsText是规范] 作为当前表单项的label
        </p>
        <pro-layout-contaner :columnCount="3" :gutter="10">
          <pro-select
            uiType="list"
            prop="selectVv3"
            v-model="test1.data.selectVv3"
            label="反显场景3"
            :dataSource="staticServerSelectList"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            prop="selectVv31"
            v-model="test1.data.selectVv31"
            label="反显场景3多选"
            :dataSource="staticServerSelectList"
            selectModel="multiple"
            labelWidth="110px"
          />
        </pro-layout-contaner>
      </el-form>
      <br />
      <br />
      <el-form :model="test1.data">
        <div>
          <div style="float: left; font-weight: 700">pro-select-list 单选</div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectv1', 0)">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectv2', 1)">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectv3', 2)">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectv4', 3)">
              赋值(自定义函数)
            </pro-action>
          </div>
        </div>
        <br />
        当数据大于10天或者 showSearch=true, 都会默认开启本地搜索
        <br />
        <pro-layout-contaner :columnCount="4" :gutter="10">
          <pro-select
            uiType="list"
            v-model="test1.data.selectv1"
            label="静态数据"
            :dataSource="staticSelectList"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            v-model="test1.data.selectv2"
            :dataSource="staticDictSelectList"
            label="字典数据"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            v-model="test1.data.selectv3"
            label="服务端"
            :dataSource="staticServerSelectList"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            v-model="test1.data.selectv4"
            label="自定义函数"
            :dataSource="staticFunctionSelectList"
            labelWidth="110px"
          />
          <div>{{ test1.data.selectv1 }}</div>
          <div>{{ test1.data.selectv2 }}</div>
          <div>{{ test1.data.selectv3 }}</div>
          <div>{{ test1.data.selectv4 }}</div>
        </pro-layout-contaner>

        <br />
        <p>
          开启服务端搜索remoteFilter=true 且
          需要在数据源中指定singleQueryField名称,
          如果接口规范有约定的话，可以直接在 pro-config-privider config.api
          中全局配置singleQueryField
          <pro-layout-contaner :columnCount="3" :gutter="10">
            <pro-select
              uiType="list"
              v-model="test1.data.selectv1q1"
              label="静态数据"
              :remoteFilter="true"
              :dataSource="staticServerQuerySelectList"
              labelWidth="110px"
            />
          </pro-layout-contaner>
          {{ test1.data.selectv1q1 }}
        </p>
        <br />

        <div>
          <div style="float: left; font-weight: 700">pro-select-list 多选</div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectv1m1', [0, 1])">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectv2m1', [1, 2])">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectv3m1', [0, 1, 3])">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectv4m1', [0, 3])">
              赋值(自定义函数)
            </pro-action>
          </div>
        </div>
        <br />
        <pro-layout-contaner :columnCount="4" :gutter="10">
          <pro-select
            uiType="list"
            v-model="test1.data.selectv1m1"
            label="静态数据"
            selectModel="multiple"
            :dataSource="staticSelectList"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            selectModel="multiple"
            v-model="test1.data.selectv2m1"
            :dataSource="staticDictSelectList"
            label="字典数据"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            selectModel="multiple"
            v-model="test1.data.selectv3m1"
            label="服务端"
            :dataSource="staticServerSelectList"
            labelWidth="110px"
          />
          <pro-select
            uiType="list"
            selectModel="multiple"
            v-model="test1.data.selectv4m1"
            label="自定义函数"
            :dataSource="staticFunctionSelectList"
            labelWidth="110px"
          />
          <div>{{ test1.data.selectv1m1 }}</div>
          <div>{{ test1.data.selectv2m1 }}</div>
          <div>{{ test1.data.selectv3m1 }}</div>
          <div>{{ test1.data.selectv4m1 }}</div>
        </pro-layout-contaner>
        <br />
        <p>
          开启服务端搜索remoteFilter=true 且
          需要在数据源中指定singleQueryField名称,
          如果接口规范有约定的话，可以直接在 pro-config-privider config.api
          中全局配置singleQueryField
          <pro-layout-contaner :columnCount="3" :gutter="10">
            <pro-select
              uiType="list"
              v-model="test1.data.selectv1q11"
              label="静态数据"
              :remoteFilter="true"
              selectModel="multiple"
              :dataSource="staticServerQuerySelectList"
              labelWidth="110px"
            />
          </pro-layout-contaner>
          {{ test1.data.selectv1q11 }}
        </p>

        <br />

        <!--  select tree -->
        <div>
          <div style="float: left; font-weight: 700">pro-select-tree 单选</div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvtree1', '0-1')">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvtree2', '1-1')">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvtree3', '2-1')">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvtree4', '3-1')">
              赋值(自定义函数)
            </pro-action>
          </div>
          <pro-layout-contaner :columnCount="4" :gutter="10">
            <pro-select
              uiType="tree"
              v-model="test1.data.selectvtree1"
              label="静态数据"
              :dataSource="staticSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="tree"
              v-model="test1.data.selectvtree2"
              label="字典数据"
              :dataSource="staticDictSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="tree"
              v-model="test1.data.selectvtree3"
              label="服务端"
              :dataSource="staticServerSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="tree"
              v-model="test1.data.selectvtree4"
              label="自定义函数"
              :dataSource="getStaticFunctionSelectTree"
              labelWidth="110px"
            />
            <div>{{ test1.data.selectvtree1 }}</div>
            <div>{{ test1.data.selectvtree2 }}</div>
            <div>{{ test1.data.selectvtree3 }}</div>
            <div>{{ test1.data.selectvtree4 }}</div>
          </pro-layout-contaner>
          <br />
          <div style="float: left; font-weight: 700">
            pro-select-tree 多选 selectModel="multiple"
          </div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvtree1m', ['0-1', '2-1'])">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvtree2m', ['1-1', '2-1'])">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvtree3m', ['3-1', '2-1'])">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvtree4m', ['2-1', '2-1'])">
              赋值(自定义函数)
            </pro-action>
          </div>
          <pro-layout-contaner :columnCount="4" :gutter="10">
            <pro-select
              uiType="tree"
              v-model="test1.data.selectvtree1m"
              label="静态数据"
              selectModel="multiple"
              :dataSource="staticSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="tree"
              v-model="test1.data.selectvtree2m"
              label="字典数据"
              selectModel="multiple"
              :dataSource="staticDictSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="tree"
              v-model="test1.data.selectvtree3m"
              label="服务端"
              selectModel="multiple"
              :dataSource="staticServerSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="tree"
              selectModel="multiple"
              v-model="test1.data.selectvtree4m"
              label="自定义函数"
              :dataSource="getStaticFunctionSelectTree"
              labelWidth="110px"
            />
            <div>{{ test1.data.selectvtree1m }}</div>
            <div>{{ test1.data.selectvtree2m }}</div>
            <div>{{ test1.data.selectvtree3m }}</div>
            <div>{{ test1.data.selectvtree4m }}</div>
          </pro-layout-contaner>

          <p>
            pro-select-tree 仅支持本地搜索,
            默认是开启本地搜索的，如果关闭只需要配置showSearch="false"
            <pro-layout-contaner :columnCount="3" :gutter="10">
              <pro-select
                :showSearch="false"
                uiType="tree"
                selectModel="multiple"
                v-model="test1.data.selectvtree4m"
                label="自定义函数"
                :dataSource="getStaticFunctionSelectTree"
                labelWidth="110px"
              />
            </pro-layout-contaner>
          </p>
          <!-- grouplist -->
          <br />
          <div style="float: left; font-weight: 700">
            pro-select-grouplist 单选, 需要指定forgroup="sex"
            分组字段,默认为group
          </div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvgroup1', 3)">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvgroup2', 2)">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvgroup3', 1)">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvgroup4', 0)">
              赋值(自定义函数)
            </pro-action>
          </div>
          <pro-layout-contaner :columnCount="4" :gutter="10">
            <pro-select-grouplist
              uiType="grouplist"
              v-model="test1.data.selectvgroup1"
              label="静态数据"
              forgroup="sex"
              :dataSource="staticGroupSelectList"
              labelWidth="110px"
            />
            <pro-select-grouplist
              uiType="grouplist"
              forgroup="sex"
              v-model="test1.data.selectvgroup2"
              label="字典数据"
              :dataSource="staticDictGroupSelectList"
              labelWidth="110px"
            />
            <pro-select-grouplist
              uiType="grouplist"
              forgroup="sex"
              v-model="test1.data.selectvgroup3"
              label="服务端"
              :dataSource="staticServerGroupSelectList"
              labelWidth="110px"
            />
            <pro-select-grouplist
              uiType="grouplist"
              v-model="test1.data.selectvgroup4"
              label="自定义函数"
              forgroup="sex"
              :dataSource="staticFunctionSelectGroupList"
              labelWidth="110px"
            />
            <div>{{ test1.data.selectvgroup1 }}</div>
            <div>{{ test1.data.selectvgroup2 }}</div>
            <div>{{ test1.data.selectvgroup3 }}</div>
            <div>{{ test1.data.selectvgroup4 }}</div>
          </pro-layout-contaner>
          <br />
          <div style="float: left; font-weight: 700">
            pro-select-grouplist 多选, 需要指定selectModel="multiple"
            forgroup="sex" 分组字段,默认为group
          </div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvgroup1g', [2, 10])">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvgroup2g', [4, 10])">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvgroup3g', [3, 10])">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvgroup4g', [7, 10])">
              赋值(自定义函数)
            </pro-action>
          </div>
          <pro-layout-contaner :columnCount="4" :gutter="10">
            <pro-select-grouplist
              uiType="grouplist"
              v-model="test1.data.selectvgroup1g"
              label="静态数据"
              selectModel="multiple"
              forgroup="sex"
              :dataSource="staticGroupSelectList"
              labelWidth="110px"
            />
            <pro-select-grouplist
              uiType="grouplist"
              forgroup="sex"
              selectModel="multiple"
              v-model="test1.data.selectvgroup2g"
              label="字典数据"
              :dataSource="staticDictGroupSelectList"
              labelWidth="110px"
            />
            <pro-select-grouplist
              uiType="grouplist"
              forgroup="sex"
              selectModel="multiple"
              v-model="test1.data.selectvgroup3g"
              label="服务端"
              :dataSource="staticServerGroupSelectList"
              labelWidth="110px"
            />
            <pro-select-grouplist
              uiType="grouplist"
              v-model="test1.data.selectvgroup4g"
              label="自定义函数"
              selectModel="multiple"
              forgroup="sex"
              :dataSource="staticFunctionSelectGroupList"
              labelWidth="110px"
            />
            <div>{{ test1.data.selectvgroup1g }}</div>
            <div>{{ test1.data.selectvgroup2g }}</div>
            <div>{{ test1.data.selectvgroup3g }}</div>
            <div>{{ test1.data.selectvgroup4g }}</div>
          </pro-layout-contaner>

          <br />
          <p>
            关闭搜索: showSearch=false
            <pro-layout-contaner :columnCount="3" :gutter="10">
              <pro-select
                uiType="grouplist"
                forgroup="sex"
                :showSearch="false"
                v-model="test1.data.selectvgroup5"
                label="静态数据"
                :dataSource="staticGroupSelectList"
                labelWidth="110px"
              />
            </pro-layout-contaner>
            {{ test1.data.selectvgroup5 }}
          </p>
          <br />
          <br />
          <p>
            服务端搜索: remoteFilter=true
            <pro-layout-contaner :columnCount="3" :gutter="10">
              <pro-select
                uiType="grouplist"
                forgroup="sex"
                :remoteFilter="true"
                v-model="test1.data.selectvgroup5"
                label="服务端"
                :dataSource="staticServerGroupSelectList"
                labelWidth="110px"
              />
            </pro-layout-contaner>
            {{ test1.data.selectvgroup5 }}
          </p>
          <br />
          <br />
          <div style="float: left; font-weight: 700">pro-select-radios</div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvradios1', 2)">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvradios2', 4)">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvradios3', 6)">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvradios4', 8)">
              赋值(自定义函数)
            </pro-action>
          </div>
          <p>
            如果需要支持取消选择, 需要配置enableCancel=true,
            并且pro-select-radios
            也具有布局功能拥有pro-layout-contaner的所有配置
          </p>
          <pro-layout-contaner :columnCount="1">
            <pro-select
              :columnCount="6"
              uiType="radios"
              :enableCancel="true"
              v-model="test1.data.selectvradios1"
              label="静态数据"
              selectModel="multiple"
              :dataSource="staticSelectList"
              labelWidth="110px"
            />
            <pro-select
              uiType="radios"
              :columnCount="6"
              :enableCancel="true"
              selectModel="multiple"
              v-model="test1.data.selectvradios2"
              :dataSource="staticDictSelectList"
              label="字典数据"
              labelWidth="110px"
            />
            <pro-select
              uiType="radios"
              selectModel="multiple"
              :columnCount="6"
              :enableCancel="true"
              v-model="test1.data.selectvradios3"
              label="服务端"
              :dataSource="staticServerSelectList"
              labelWidth="110px"
            />
            <pro-select
              uiType="radios"
              selectModel="multiple"
              :enableCancel="true"
              :columnCount="6"
              v-model="test1.data.selectvradios4"
              label="自定义函数"
              :dataSource="staticFunctionSelectList"
              labelWidth="110px"
            />
            <div :span="6">{{ test1.data.selectvradios1 }}</div>
            <div :span="6">{{ test1.data.selectvradios2 }}</div>
            <div :span="6">{{ test1.data.selectvradios3 }}</div>
            <div :span="6">{{ test1.data.selectvradios4 }}</div>
          </pro-layout-contaner>

          <br />
          <br />
          <div style="float: left; font-weight: 700">pro-select-checks</div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvchecks1', [2, 4])">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvchecks2', [3, 4])">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvchecks3', [5, 4])">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvchecks4', [6, 4])">
              赋值(自定义函数)
            </pro-action>
          </div>
          <p>
            pro-select-checks也具有布局功能, 拥有pro-layout-contaner的所有配置
          </p>
          <pro-layout-contaner :columnCount="1">
            <pro-select
              :columnCount="6"
              uiType="checks"
              v-model="test1.data.selectvchecks1"
              label="静态数据"
              selectModel="multiple"
              :dataSource="staticSelectList"
              labelWidth="110px"
            />
            <pro-select
              uiType="checks"
              :columnCount="6"
              selectModel="multiple"
              v-model="test1.data.selectvchecks2"
              :dataSource="staticDictSelectList"
              label="字典数据"
              labelWidth="110px"
            />
            <pro-select
              uiType="checks"
              selectModel="multiple"
              :columnCount="6"
              v-model="test1.data.selectvchecks3"
              label="服务端"
              :dataSource="staticServerSelectList"
              labelWidth="110px"
            />
            <pro-select
              uiType="checks"
              selectModel="multiple"
              :columnCount="6"
              v-model="test1.data.selectvchecks4"
              label="自定义函数"
              :dataSource="staticFunctionSelectList"
              labelWidth="110px"
            />
            <div :span="6">{{ test1.data.selectvchecks1 }}</div>
            <div :span="6">{{ test1.data.selectvchecks2 }}</div>
            <div :span="6">{{ test1.data.selectvchecks3 }}</div>
            <div :span="6">{{ test1.data.selectvchecks4 }}</div>
          </pro-layout-contaner>

          <br />
          <br />
          <div style="float: left; font-weight: 700">pro-select-table 单选</div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvtable1', 2)">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvtable2', 3)">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvtable3', 6)">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvtable4', 6)">
              赋值(自定义函数)
            </pro-action>
          </div>
          <pro-layout-contaner :columnCount="4">
            <pro-select
              :columns="selectTableCcolumns"
              uiType="table"
              v-model="test1.data.selectvtable1"
              label="静态数据"
              :dataSource="staticTableSelectList"
              labelWidth="110px"
            />
            <pro-select
              uiType="table"
              :columns="selectTableCcolumns"
              v-model="test1.data.selectvtable2"
              :dataSource="staticDictTableSelectList"
              label="字典数据"
              labelWidth="110px"
            />
            <pro-select
              uiType="table"
              :columns="selectTableCcolumns"
              v-model="test1.data.selectvtable3"
              label="服务端"
              :remoteFilter="true"
              :dataSource="staticServerTableSelectList"
              labelWidth="110px"
            />
            <pro-select
              uiType="table"
              v-model="test1.data.selectvtable4"
              label="自定义函数"
              :columns="selectTableCcolumns"
              :dataSource="staticFunctionTableSelectList"
              labelWidth="110px"
            />
            <div :span="6">{{ test1.data.selectvtable1 }}</div>
            <div :span="6">{{ test1.data.selectvtable2 }}</div>
            <div :span="6">{{ test1.data.selectvtable3 }}</div>
            <div :span="6">{{ test1.data.selectvtable4 }}</div>
          </pro-layout-contaner>

          <br />
          <br />
          <div style="float: left; font-weight: 700">pro-select-table 多选</div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvtable1tb', [2, 3])">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvtable2tb', [3, 4])">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvtable3tb', [6, 5])">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvtable4tb', [6, 7])">
              赋值(自定义函数)
            </pro-action>
          </div>
          <pro-layout-contaner :columnCount="4">
            <pro-select
              :columns="selectTableCcolumns"
              uiType="table"
              selectModel="multiple"
              v-model="test1.data.selectvtable1tb"
              label="静态数据"
              :dataSource="staticTableSelectList"
              labelWidth="110px"
            />
            <pro-select
              uiType="table"
              selectModel="multiple"
              :columns="selectTableCcolumns"
              v-model="test1.data.selectvtable2tb"
              :dataSource="staticDictTableSelectList"
              label="字典数据"
              labelWidth="110px"
            />
            <pro-select
              uiType="table"
              :columns="selectTableCcolumns"
              selectModel="multiple"
              v-model="test1.data.selectvtable3tb"
              label="服务端"
              :remoteFilter="true"
              :dataSource="staticServerTableSelectList"
              labelWidth="110px"
            />
            <pro-select
              uiType="table"
              v-model="test1.data.selectvtable4tb"
              label="自定义函数"
              selectModel="multiple"
              :columns="selectTableCcolumns"
              :dataSource="staticFunctionTableSelectList"
              labelWidth="110px"
            />
            <div :span="6">{{ test1.data.selectvtable1tb }}</div>
            <div :span="6">{{ test1.data.selectvtable2tb }}</div>
            <div :span="6">{{ test1.data.selectvtable3tb }}</div>
            <div :span="6">{{ test1.data.selectvtable4tb }}</div>
          </pro-layout-contaner>
          <br />
          <br />
          <div style="float: left; font-weight: 700">
            pro-select-cascader 级联 单选
          </div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvcascader1', '0-1')">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvcascader2', '1-1')">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvcascader3', '2-1')">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvcascader4', '3-1')">
              赋值(自定义函数)
            </pro-action>
          </div>
          <p>级联的反显目前仅支持非按需加载数据源模式,</p>
          <pro-layout-contaner :columnCount="4">
            <pro-select
              :columns="selectTableCcolumns"
              uiType="cascader"
              v-model="test1.data.selectvcascader1"
              label="静态数据"
              :dataSource="staticSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="cascader"
              :columns="selectTableCcolumns"
              v-model="test1.data.selectvcascader2"
              :dataSource="staticDictSelectTree"
              label="字典数据"
              labelWidth="110px"
            />
            <pro-select
              uiType="cascader"
              :columns="selectTableCcolumns"
              v-model="test1.data.selectvcascader3"
              label="服务端"
              :remoteFilter="true"
              :dataSource="staticServerSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="cascader"
              v-model="test1.data.selectvcascader4"
              label="自定义函数"
              :columns="selectTableCcolumns"
              :dataSource="getStaticFunctionSelectTree"
              labelWidth="110px"
            />
            <div :span="6">{{ test1.data.selectvcascader1 }}</div>
            <div :span="6">{{ test1.data.selectvcascader2 }}</div>
            <div :span="6">{{ test1.data.selectvcascader3 }}</div>
            <div :span="6">{{ test1.data.selectvcascader4 }}</div>
          </pro-layout-contaner>
          <br />
          <br />
          <div style="float: left; font-weight: 700">
            pro-select-cascader 级联 多选
          </div>
          <div style="overflow: hidde; text-align: right">
            <pro-action @handler="applyValue('selectvcascader1m', ['0-1'])">
              赋值(静态数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvcascader2m', ['1-1'])">
              赋值(字典数据)
            </pro-action>
            <pro-action @handler="applyValue('selectvcascader3m', ['2-1'])">
              赋值(服务端)
            </pro-action>
            <pro-action @handler="applyValue('selectvcascader4m', ['3-1'])">
              赋值(自定义函数)
            </pro-action>
          </div>
          <p>级联的反显目前仅支持非按需加载数据源模式,</p>
          <pro-layout-contaner :columnCount="4">
            <pro-select
              uiType="cascader"
              selectModel="multiple"
              v-model="test1.data.selectvcascader1m"
              label="静态数据"
              :dataSource="staticSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="cascader"
              v-model="test1.data.selectvcascader2m"
              :dataSource="staticDictSelectTree"
              selectModel="multiple"
              label="字典数据"
              labelWidth="110px"
            />
            <pro-select
              uiType="cascader"
              v-model="test1.data.selectvcascader3m"
              label="服务端"
              selectModel="multiple"
              :dataSource="staticServerSelectTree"
              labelWidth="110px"
            />
            <pro-select
              uiType="cascader"
              v-model="test1.data.selectvcascader4m"
              label="自定义函数"
              selectModel="multiple"
              :dataSource="getStaticFunctionSelectTree"
              labelWidth="110px"
            />
            <div :span="6">{{ test1.data.selectvcascader1m }}</div>
            <div :span="6">{{ test1.data.selectvcascader2m }}</div>
            <div :span="6">{{ test1.data.selectvcascader3m }}</div>
            <div :span="6">{{ test1.data.selectvcascader4m }}</div>
          </pro-layout-contaner>
          <p>
              pro-select-cascader 数据源按需加载,需要配置props="{ lazy: true }", <br/>关于数据的配置:
              默认指挥传递node.key,如果需要传递节点其他参数，需要定制cascaderParams配置,例如<br/>
              dataSource('?', '?', { cascaderParams: (node) => ({ level: node.level })  })
              <pro-layout-contaner :columnCount="3">
                  <pro-select
                  uiType="cascader"
                  :props="{ lazy: true }"
                  v-model="test1.data.selectvcascader5m"
                  label="自定义函数"
                  :dataSource="getLazySelectTree"
                  labelWidth="110px"
                />
              </pro-layout-contaner>
            <p>{{test1.data.selectvcascader5m}}</p>
          </p>

          <div style="height: 200px"></div>
        </div>
      </el-form>
    </el-card>
    <br />
    <el-card header="pro-input-[text|number|phone|email|]">
      <el-form :model="test1.data">
        <div>pro-input-text</div>
        <br />
        <pro-layout-contaner :columnCount="4">
          <el-form-item
            label="text"
            labelWidth="100px"
            :rules="[
              { min: 10, max: 15, type: 'string', message: '输入长度10~15' },
            ]"
          >
            <pro-input-text v-model="test1.data.a5" lazy />
          </el-form-item>
          <div>{{ test1.data.a5 }}</div>
          <el-form-item label="phone" labelWidth="100px">
            <pro-input-phone
              v-model="test1.data.a6"
              lazy
              message="输入格式不对"
            />
          </el-form-item>
          <div>{{ test1.data.a6 }}</div>
          <el-form-item label="email" labelWidth="100px">
            <pro-input-email
              v-model="test1.data.a61"
              lazy
              message="输入格式不对"
            />
          </el-form-item>
          <div>{{ test1.data.a61 }}</div>
          <el-form-item label="number" labelWidth="100px">
            <pro-input-number
              v-model="test1.data.a611"
              lazy
              message="输入数字错误: 范围为10~15"
            />
          </el-form-item>
          <div>{{ test1.data.a611 }}</div>
          <el-form-item label="integer" labelWidth="100px">
            <pro-input-number
              :decimal="0"
              v-model="test1.data.a6111"
              lazy
              message="输入数字错误: 范围为10~15"
            />
          </el-form-item>
          <div>{{ test1.data.a6111 }}</div>
          <el-form-item label="精度2位" labelWidth="100px">
            <pro-input-number
              :decimal="2"
              v-model="test1.data.a61111"
              lazy
              message="输入数字错误: 范围为10~15"
            />
          </el-form-item>
          <div>{{ test1.data.a61111 }}</div>
          <el-form-item label="单位" labelWidth="100px">
            <pro-input-number
              :rate="10000"
              v-model="test1.data.a611111"
              lazy
              message="输入数字错误"
            >
              <span slot="append">万元</span>
            </pro-input-number>
          </el-form-item>
          <div>{{ test1.data.a611111 }}</div>
          <el-form-item label="单位" labelWidth="100px">
            <pro-input-number
              :rate="0.01"
              v-model="test1.data.a6111111"
              lazy
              message="输入数字错误"
            >
              <span slot="append">%</span>
            </pro-input-number>
          </el-form-item>
          <div>{{ test1.data.a6111111 }}</div>
          <el-form-item label="千分位" labelWidth="100px">
            <pro-input-number
              :thousands="true"
              v-model="test1.data.a61111111"
              lazy
              message="输入数字错误"
            >
            </pro-input-number>
          </el-form-item>
          <div>{{ test1.data.a61111111 }}</div>
          <el-form-item label="千分位+精度" labelWidth="150px">
            <pro-input-number
              :thousands="true"
              :decimal="2"
              v-model="test1.data.a6111111111"
              lazy
              message="输入数字错误"
            >
            </pro-input-number>
          </el-form-item>
          <div>{{ test1.data.a6111111111 }}</div>
          <el-form-item label="千分位+精度+单位" labelWidth="150px">
            <pro-input-number
              :thousands="true"
              :decimal="2"
              :rate="10000"
              v-model="test1.data.a61111111111"
              lazy
              message="输入数字错误"
            >
            </pro-input-number>
          </el-form-item>
          <div>{{ test1.data.a61111111111 }}</div>
          <el-form-item label="textarea" labelWidth="100px" :span="18">
            <pro-input-textarea
              v-model="test1.data.a611111111111"
              :rows="5"
              :min="20"
              message="至少输入20字符"
              :max="100"
            >
            </pro-input-textarea>
          </el-form-item>
          <div :span="6">{{ test1.data.a611111111111 }}</div>
          <el-form-item label="pattern" labelWidth="100px">
            <pro-input-pattern
              v-model="test1.data.a6111111111111"
              :min="5"
              message="输入字符长度:5~13,且以139开头"
              :max="13"
              :pattern="testpattern"
            >
            </pro-input-pattern>
          </el-form-item>
          <div>{{ test1.data.a6111111111111 }}</div>
          <el-form-item label="date" labelWidth="100px">
            <pro-input-date
              v-model="test1.data.a61111111111111"
              min="month"
              max="month:31"
            >
            </pro-input-date>
          </el-form-item>
          <div>{{ test1.data.a61111111111111 }}</div>
          <el-form-item label="datetime" labelWidth="100px">
            <pro-input-datetime
              v-model="test1.data.a611111111111111"
              min="month"
              max="month:31"
            >
            </pro-input-datetime>
          </el-form-item>
          <div>{{ test1.data.a611111111111111 }}</div>
          <el-form-item label="time" labelWidth="100px">
            <pro-input-time
              v-model="test1.data.a6111111111111111"
              min="10:00"
              max="14:30"
            >
            </pro-input-time>
          </el-form-item>
          <div>{{ test1.data.a6111111111111111 }}</div>
          <el-form-item label="timePicker" labelWidth="100px" :span="12">
            <pro-input-time
              v-model="test1.data.a61111111111111112"
              type="timePicker"
              min="10:00:00"
              max="14:30:00"
            >
            </pro-input-time>
          </el-form-item>
          <div :span="12">{{ test1.data.a61111111111111112 }}</div>
          <el-form-item label="number-range" labelWidth="100px" :span="12">
            <pro-input-number-range
              :decimal="4"
              v-model="test1.data.a61111111111111111"
            >
            </pro-input-number-range>
          </el-form-item>
          <div :span="12">{{ test1.data.a61111111111111111 }}</div>
          <el-form-item label="date-range" labelWidth="100px" :span="12">
            <pro-input-date-range v-model="test1.data.a611111111111111111">
            </pro-input-date-range>
          </el-form-item>
          <div :span="12">{{ test1.data.a611111111111111111 }}</div>
          <el-form-item label="datetime-range" labelWidth="150px" :span="12">
            <pro-input-date-range
              type="time"
              v-model="test1.data.a6111111111111111111"
            >
            </pro-input-date-range>
          </el-form-item>
          <div :span="12">{{ test1.data.a6111111111111111111 }}</div>
          <el-form-item label="time-range" labelWidth="100px" :span="12">
            <pro-input-time-range v-model="test1.data.a611111111111111111111">
            </pro-input-time-range>
          </el-form-item>
          <div :span="12">{{ test1.data.a611111111111111111111 }}</div>
          <el-form-item label="autocomplete" labelWidth="100px" :span="12">
            <pro-input-autocomplete
              :dataSource="useResponseAutoCompelete"
              v-model="test1.data.a61111111111111111111111111xx"
            >
            </pro-input-autocomplete>
          </el-form-item>
          <div :span="12">{{ test1.data.a61111111111111111111111111xx }}</div>
        </pro-layout-contaner>
      </el-form>
    </el-card>
    <br />
    <el-card header="svg icons ">
      <IconComponent />
    </el-card>
    <br />
    <h2>pro-layout-content-border： 基础布局</h2>
    <pro-layout-content-border
      style="height: 500px"
      :enableCollapseLeft="true"
      :enableCollapseRight="true"
      :enableCollapseTop="true"
      :enableCollapseBottom="true"
    >
      <template slot="left">
        <div style="width: 100px; height: 100%; background: aliceblue">
          left
        </div>
      </template>
      <template slot="right">
        <div style="width: 100px; height: 100%; background: burlywood">
          right
        </div>
      </template>
      <template slot="top">
        <div style="height: 100px; background: antiquewhite">top</div>
      </template>
      <template slot="bottom">
        <div style="height: 100px; background: aqua">bottom</div>
      </template>
      <div style="height: 100%; width: 100%; background: cadetblue">center</div>
    </pro-layout-content-border>
    <br />
    <br />
    <h2>pro-layout-content-border： affix top</h2>
    <pro-layout-content-border
      style="height: 500px"
      :enableCollapseTop="true"
      :affix-top="{ target: '.test-content' }"
    >
      <template slot="left">
        <div style="width: 100px; height: 100%; background: aliceblue">
          left
        </div>
      </template>
      <template slot="right">
        <div style="width: 100px; height: 100%; background: burlywood">
          right
        </div>
      </template>
      <template slot="top">
        <div style="height: 100px; background: antiquewhite">top</div>
      </template>
      <template slot="bottom">
        <div style="height: 100px; background: aqua">bottom</div>
      </template>
      <div
        style="height: 100%; width: 100%; background: cadetblue"
        class="test-content"
      >
        center
      </div>
    </pro-layout-content-border>
    <br />
    <h2>pro-layout-content-border： affix left</h2>
    <pro-layout-content-border
      style="height: 500px"
      :enableCollapseTop="true"
      :affix-left="{ target: '.test-content' }"
    >
      <template slot="left">
        <div
          style="
            width: 100px;
            height: 100%;
            min-height: 50px;
            background: aliceblue;
          "
        >
          left
        </div>
      </template>
      <template slot="right">
        <div style="width: 100px; height: 100%; background: burlywood">
          right
        </div>
      </template>
      <template slot="top">
        <div style="height: 100px; background: antiquewhite">top</div>
      </template>
      <template slot="bottom">
        <div style="height: 100px; background: aqua">bottom</div>
      </template>
      <div
        style="height: 100%; width: 100%; background: cadetblue"
        class="test-content"
      >
        center
      </div>
    </pro-layout-content-border>
    <br />

    <el-card header="pro-layout-content-type 介绍" shadow="never">
      <pre>
这是一个"内容分类布局"组件, 怎么理解这个组件呢？ 当页面元素 "特别多", 我们必然要给这些元素分类排版, 例如:el-tabs 、
el-row、el-collapse 这些都是用于排版的, pro-layout-content-type 主要是只是结合业务经验，封装了几种常用布局处理，
简化大家的编码实现, 以下例子:
        </pre
      >
    </el-card>

    <el-card
      header="pro-layout-content-type list模式: 同时显示所有分类"
      shadow="never"
    >
      <pro-layout-content-type :enableNav="false">
        <pro-layout-content-type-item label="内容1" name="type1">
          <span slot="label">内容1--自定义</span>
          <div style="height: 100px; background: green; color: #ffffff">
            内容1
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容2" name="type2">
          <div style="height: 100px; background: red; color: #ffffff">
            内容2
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容3" name="type3">
          <div style="height: 100px; background: blue; color: #ffffff">
            内容3
          </div>
        </pro-layout-content-type-item>
      </pro-layout-content-type>

      <div
        style="
          border: 1px dashed rgb(202, 183, 183);
          margin-top: 10px;
          background-color: #a9b0b7;
          padding: 20px;
        "
      >
        <pre>
&lt;pro-layout-content-type :enableNav=&quot;false&quot;&gt;
  &lt;pro-layout-content-type-item label=&quot;内容1&quot; name=&quot;type1&quot;&gt;
    &lt;span slot=&quot;label&quot;&gt;内容1--自定义&lt;/span&gt;
    &lt;div style=&quot;height: 100px; background: green; color: #ffffff&quot;&gt;
      内容1
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容2&quot; name=&quot;type2&quot;&gt;
    &lt;div style=&quot;height: 100px; background: red; color: #ffffff&quot;&gt;
      内容2
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容3&quot; name=&quot;type3&quot;&gt;
    &lt;div style=&quot;height: 100px; background: blue; color: #ffffff&quot;&gt;
      内容3
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
&lt;/pro-layout-content-type&gt;
        </pre>
      </div>
    </el-card>
    <br /><br />
    <el-card
      header="pro-layout-content-type list模式: 同时显示所有分类---可折叠"
      shadow="never"
    >
      <pre>
默认会展开所有, 如果初始化的时候 想关闭某一些，可以使用defaultActive属性          
      </pre>
      <pro-layout-content-type :enableNav="false" contentLayoutType="collapse">
        <pro-layout-content-type-item label="内容1" name="type1">
          <span slot="label">内容1--自定义</span>
          <div style="height: 100px; background: green; color: #ffffff">
            内容1
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item
          label="内容2"
          name="type2"
          :defaultActive="false"
        >
          <div style="height: 100px; background: red; color: #ffffff">
            内容2
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容3" name="type3">
          <div style="height: 100px; background: blue; color: #ffffff">
            内容3
          </div>
        </pro-layout-content-type-item>
      </pro-layout-content-type>

      <div
        style="
          border: 1px dashed rgb(202, 183, 183);
          margin-top: 10px;
          background-color: #a9b0b7;
          padding: 20px;
        "
      >
        <pre>
&lt;pro-layout-content-type :enableNav=&quot;false&quot;&gt;
  &lt;pro-layout-content-type-item label=&quot;内容1&quot; name=&quot;type1&quot;&gt;
    &lt;span slot=&quot;label&quot;&gt;内容1--自定义&lt;/span&gt;
    &lt;div style=&quot;height: 100px; background: green; color: #ffffff&quot;&gt;
      内容1
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容2&quot; :defaultActive=&quot;false&quot; name=&quot;type2&quot;&gt;
    &lt;div style=&quot;height: 100px; background: red; color: #ffffff&quot;&gt;
      内容2
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容3&quot; name=&quot;type3&quot;&gt;
    &lt;div style=&quot;height: 100px; background: blue; color: #ffffff&quot;&gt;
      内容3
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
&lt;/pro-layout-content-type&gt;
        </pre>
      </div>
    </el-card>
    <br /><br />
    <el-card header="pro-layout-content-type list模式: 启用导航" shadow="never">
      <pre>
      list模式下的导航: 会自定开启锚点功能, 所以需要做如下配置:
        1. 给内容区指定一个样式类标记 center-cls="test-nav-aaaaaaaa"
        2. 然后配置内容区 可以滚动:center-style="{ height: '400px', overflow: 'auto' }"
        3. 配置scroll-container-selector=".test-nav-aaaaaaaa"

       高级配置 
         1. enableCollapseLeft="false" 左边导航不可以折叠(默认为false)
         2. 导航在左边时,可以设置enableCollapseLeft="true"左边导航折叠
         3. 导航在navPosition="right"右边时,可以设置enableCollapseRight="true"左边导航折叠
         4. 当导航在左边，可以设置affixLeft="true" 固定在最近的overflow容器中, 
             指定target=".test-nav-aaaaaaaa",当内容区不可见时,导航会自动消失

    </pre
      >
      <pro-layout-content-type
        :enableNav="true"
        :affixLeft="true"
        target=".test-nav-aaaaaaaa"
        center-cls="test-nav-aaaaaaaa"
        :center-style="{ height: '300px', overflow: 'auto' }"
        scroll-container-selector=".test-nav-aaaaaaaa"
      >
        <pro-layout-content-type-item label="内容1" name="type1">
          <span slot="label">内容1--自定义</span>
          <div style="height: 400px; background: green; color: #ffffff">
            内容1
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容2" name="type2">
          <div style="height: 100px; background: red; color: #ffffff">
            内容2
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容3" name="type3">
          <div style="height: 200px; background: blue; color: #ffffff">
            内容3
          </div>
        </pro-layout-content-type-item>
      </pro-layout-content-type>

      <div
        style="
          border: 1px dashed rgb(202, 183, 183);
          margin-top: 10px;
          background-color: #a9b0b7;
          padding: 20px;
        "
      >
        <pre>
&lt;pro-layout-content-type
  :enableNav=&quot;true&quot;
  :affixLeft=&quot;true&quot;
  target=&quot;.test-nav-aaaaaaaa&quot;
  center-cls=&quot;test-nav-aaaaaaaa&quot;
  :center-style=&quot;{ height: &#x27;300px&#x27;, overflow: &#x27;auto&#x27; }&quot;
  scroll-container-selector=&quot;.test-nav-aaaaaaaa&quot;
&gt;
  &lt;pro-layout-content-type-item label=&quot;内容1&quot; name=&quot;type1&quot;&gt;
    &lt;span slot=&quot;label&quot;&gt;内容1--自定义&lt;/span&gt;
    &lt;div style=&quot;height: 400px; background: green; color: #ffffff&quot;&gt;
      内容1
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容2&quot; name=&quot;type2&quot;&gt;
    &lt;div style=&quot;height: 100px; background: red; color: #ffffff&quot;&gt;
      内容2
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容3&quot; name=&quot;type3&quot;&gt;
    &lt;div style=&quot;height: 200px; background: blue; color: #ffffff&quot;&gt;
      内容3
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
&lt;/pro-layout-content-type&gt;
        </pre>
      </div>
    </el-card>
    <br />
    <el-card header="pro-layout-content-type tab模式" shadow="never">
      <pre>
       设置modal="tab"即可, tab模式下仅显示激活的 区域
    </pre
      >
      <pro-layout-content-type modal="tab" activeName="type1" navType="tab">
        <pro-layout-content-type-item label="内容1" name="type1">
          <span slot="label"><i class="el-icon-date"></i> 内容1</span>
          <div style="height: 200px; background: green; color: #ffffff">
            内容1
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容2" name="type2">
          <div style="height: 200px; background: red; color: #ffffff">
            内容2
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容3" name="type3">
          <div style="height: 200px; background: blue; color: #ffffff">
            内容3
          </div>
        </pro-layout-content-type-item>
      </pro-layout-content-type>

      <div
        style="
          border: 1px dashed rgb(202, 183, 183);
          margin-top: 10px;
          background-color: #a9b0b7;
          padding: 20px;
        "
      >
        <pre>
&lt;pro-layout-content-type modal=&quot;tab&quot; activeName=&quot;type1&quot; navType=&quot;tab&quot;&gt;
  &lt;pro-layout-content-type-item label=&quot;内容1&quot; name=&quot;type1&quot;&gt;
  &lt;span slot=&quot;label&quot;&gt;&lt;i class=&quot;el-icon-date&quot;&gt;&lt;/i&gt; 内容1&lt;/span&gt;
    &lt;div style=&quot;height: 200px; background: green; color: #ffffff&quot;&gt;
      内容1
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容2&quot; name=&quot;type2&quot;&gt;
    &lt;div style=&quot;height: 200px; background: red; color: #ffffff&quot;&gt;
      内容2
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容3&quot; name=&quot;type3&quot;&gt;
    &lt;div style=&quot;height: 200px; background: blue; color: #ffffff&quot;&gt;
      内容3
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
&lt;/pro-layout-content-type&gt;
        </pre>
      </div>
    </el-card>
    <br />
    <el-card header="pro-layout-content-type tab模式" shadow="never">
      <pro-layout-content-type modal="tab" activeName="type1">
        <pro-layout-content-type-item label="内容1" name="type1">
          <span slot="label"><i class="el-icon-date"></i> 内容1</span>
          <div style="height: 200px; background: green; color: #ffffff">
            内容1
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容2" name="type2">
          <div style="height: 200px; background: red; color: #ffffff">
            内容2
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容3" name="type3">
          <div style="height: 200px; background: blue; color: #ffffff">
            内容3
          </div>
        </pro-layout-content-type-item>
      </pro-layout-content-type>

      <div
        style="
          border: 1px dashed rgb(202, 183, 183);
          margin-top: 10px;
          background-color: #a9b0b7;
          padding: 20px;
        "
      >
        <pre>
&lt;pro-layout-content-type modal=&quot;tab&quot; activeName=&quot;type1&quot; &gt;
  &lt;pro-layout-content-type-item label=&quot;内容1&quot; name=&quot;type1&quot;&gt;
  &lt;span slot=&quot;label&quot;&gt;&lt;i class=&quot;el-icon-date&quot;&gt;&lt;/i&gt; 内容1&lt;/span&gt;
    &lt;div style=&quot;height: 200px; background: green; color: #ffffff&quot;&gt;
      内容1
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容2&quot; name=&quot;type2&quot;&gt;
    &lt;div style=&quot;height: 200px; background: red; color: #ffffff&quot;&gt;
      内容2
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容3&quot; name=&quot;type3&quot;&gt;
    &lt;div style=&quot;height: 200px; background: blue; color: #ffffff&quot;&gt;
      内容3
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
&lt;/pro-layout-content-type&gt;
        </pre>
      </div>
    </el-card>
    <br />
    <el-card header="pro-layout-content-type tab模式" shadow="never">
      <pro-layout-content-type
        modal="tab"
        activeName="type1"
        :enableCollapseLeft="true"
      >
        <pro-layout-content-type-item label="内容1" name="type1">
          <span slot="label"><i class="el-icon-date"></i> 内容1</span>
          <div style="height: 200px; background: green; color: #ffffff">
            内容1
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容2" name="type2">
          <div style="height: 200px; background: red; color: #ffffff">
            内容2
          </div>
        </pro-layout-content-type-item>
        <pro-layout-content-type-item label="内容3" name="type3">
          <div style="height: 200px; background: blue; color: #ffffff">
            内容3
          </div>
        </pro-layout-content-type-item>
      </pro-layout-content-type>

      <div
        style="
          border: 1px dashed rgb(202, 183, 183);
          margin-top: 10px;
          background-color: #a9b0b7;
          padding: 20px;
        "
      >
        <pre>
&lt;pro-layout-content-type modal=&quot;tab&quot; :enableCollapseLeft=&quot;true&quot; activeName=&quot;type1&quot; &gt;
  &lt;pro-layout-content-type-item label=&quot;内容1&quot; name=&quot;type1&quot;&gt;
  &lt;span slot=&quot;label&quot;&gt;&lt;i class=&quot;el-icon-date&quot;&gt;&lt;/i&gt; 内容1&lt;/span&gt;
    &lt;div style=&quot;height: 200px; background: green; color: #ffffff&quot;&gt;
      内容1
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容2&quot; name=&quot;type2&quot;&gt;
    &lt;div style=&quot;height: 200px; background: red; color: #ffffff&quot;&gt;
      内容2
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
  &lt;pro-layout-content-type-item label=&quot;内容3&quot; name=&quot;type3&quot;&gt;
    &lt;div style=&quot;height: 200px; background: blue; color: #ffffff&quot;&gt;
      内容3
    &lt;/div&gt;
  &lt;/pro-layout-content-type-item&gt;
&lt;/pro-layout-content-type&gt;
        </pre>
      </div>
    </el-card>


    <el-card
      header="pro-scroll-active"
      shadow="never"
      :body-style="{ height: '400px', overflow: 'auto' }"
      style="position: relative"
    >
      <!-- scroll active -->
      <div>
        <pro-scroll-active
          scrollContainerSelector=".el-card__body"
          style="float: left; width: 200px; position: absolute; top: 60px"
        >
          <ul class="pro-nav">
            <li
              class="pro-nav-item scrollactive-item"
              data-section-selector="wangxiufu1"
            >
              wangxiufu 1
            </li>
            <li
              class="pro-nav-item scrollactive-item"
              data-section-selector="wangxiufu2"
            >
              wangxiufu 2
            </li>
            <li
              class="pro-nav-item scrollactive-item"
              data-section-selector="wangxiufu3"
            >
              wangxiufu3
            </li>
            <li
              class="pro-nav-item scrollactive-item"
              data-section-selector="wangxiufu4"
            >
              wangxiufu4
            </li>
            <li
              class="pro-nav-item scrollactive-item"
              data-section-selector="wangxiufu5"
            >
              wangxiufu 5
            </li>
            <li
              class="pro-nav-item scrollactive-item"
              data-section-selector="wangxiufu6"
            >
              wangxiufu6
            </li>
            <li
              class="pro-nav-item scrollactive-item"
              data-section-selector="wangxiufu7"
            >
              wangxiufu7
            </li>
          </ul>
        </pro-scroll-active>

        <div style="overflow: hidden; margin-left: 220px">
          <pro-scroll-active-mark mark="wangxiufu1" />
          <div
            style="height: 100px; background-color: #c3b2b2; margin-bottom: 5px"
          >
            wangxiufu1
          </div>
          <pro-scroll-active-mark mark="wangxiufu2" />
          <div
            style="height: 100px; background-color: #c3b2b2; margin-bottom: 5px"
          >
            wangxiufu2
          </div>
          <pro-scroll-active-mark mark="wangxiufu3" />
          <div
            style="height: 100px; background-color: #c3b2b2; margin-bottom: 5px"
          >
            wangxiufu3
          </div>
          <pro-scroll-active-mark mark="wangxiufu4" />
          <div
            style="height: 100px; background-color: #c3b2b2; margin-bottom: 5px"
          >
            wangxiufu4
          </div>
          <pro-scroll-active-mark mark="wangxiufu5" />
          <div
            style="height: 100px; background-color: #c3b2b2; margin-bottom: 5px"
          >
            wangxiufu5
          </div>
          <pro-scroll-active-mark mark="wangxiufu6" />
          <div
            style="height: 100px; background-color: #c3b2b2; margin-bottom: 5px"
          >
            wangxiufu6
          </div>
          <pro-scroll-active-mark mark="wangxiufu7" />
          <div
            style="height: 100px; background-color: #c3b2b2; margin-bottom: 5px"
          >
            wangxiufu7
          </div>
          <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
      </div>
    </el-card>
    <el-card header="pro-collapse-transition" shadow="never">
      <div>
        高度动画展开{{ test.data.show1
        }}<pro-action
          text="测试"
          @handler="test.data.show1 = !test.data.show1"
        />
      </div>
      <pro-collapse-transition>
        <div
          v-if="test.data.show1"
          style="width: 100px; height: 200px; background-color: red"
        ></div>
      </pro-collapse-transition>
      <div>
        宽度动画展开{{ test.data.show2
        }}<pro-action
          text="测试"
          @handler="test.data.show2 = !test.data.show2"
        />
      </div>
      <pro-collapse-transition dimension="width">
        <div
          v-if="test.data.show2"
          style="width: 100px; height: 200px; background-color: red"
        ></div>
      </pro-collapse-transition>
    </el-card>
    <el-card
      header="pro-affixnav-collapse-transition 侧边栏折叠"
      shadow="never"
    >
      <pro-affixnav-collapse-transition sideWidth="150px">
        <div slot="side">
          <div style="min-height: 100px; background: red"></div>
        </div>
        <template slot="trigger">
          <i class="el-icon-s-fold"></i>
        </template>
        <div
          style="height: 400px; background-color: #ececec"
          class="ddddddddddd"
        ></div>
      </pro-affixnav-collapse-transition>
    </el-card>
    <br />
    <el-card
      header="pro-affixnav-collapse-transition 侧边栏折叠position=right"
      shadow="never"
    >
      <pro-affixnav-collapse-transition sideWidth="150px" position="right">
        <div slot="side">
          <div style="min-height: 100px; background: red"></div>
        </div>
        <template slot="trigger">
          <i class="el-icon-s-fold"></i>
        </template>
        <div
          style="height: 400px; background-color: #ececec"
          class="ddddddddddd"
        ></div>
      </pro-affixnav-collapse-transition>
    </el-card>
    <br />
    <el-card header="pro-affix" shadow="never">
      <pro-select-radios
        :dataSource="[
          { value: 1, label: '固定窗口' },
          { value: 2, label: '固定滚动元素' },
          { value: 3, label: '指定target' },
        ]"
        v-model="affixvalue"
      ></pro-select-radios>

      <div
        :style="
          affixvalue !== 2
            ? { border: '1px solid #000000' }
            : {
                border: '1px solid #000000',
                position: 'relative',
                overflow: 'auto',
                height: '200px',
              }
        "
      >
        <div
          style="height: 100px; margin-bottom: 10px; background-color: #acacac"
        >
          占位1
        </div>
        <pro-affix key="1" v-if="affixvalue === 1">
          <div style="height: 30px; background-color: red">
            我会固定在scroll-contaner元素的顶部top=0位置
          </div>
        </pro-affix>
        <pro-affix key="2" v-if="affixvalue === 2">
          <div style="height: 30px; background-color: red">
            我会固定在scroll-contaner元素的顶部top=0位置
          </div>
        </pro-affix>
        <pro-affix key="3" v-if="affixvalue === 3" target=".target-affix">
          <div style="height: 30px; background-color: red">
            我会固定在scroll-contaner元素的顶部top=0位置
          </div>
        </pro-affix>
        <div
          style="height: 200px; margin-bottom: 10px; background-color: #acacac"
          class="target-affix"
        >
          占位2
        </div>
        <div
          style="height: 200px; margin-bottom: 10px; background-color: #acacac"
        >
          占位3
        </div>
      </div>
    </el-card>
    <br />
    <el-card header="pro-resize-observer" shadow="never">
      <pro-resize-observer @resize="doResize">
        <div
          class="test-resize-observer"
          :style="{ height: this.resizeHeight, background: '#e7dddd' }"
        >
          <pro-action @handler="changeResizeHeight"
            >变化:{{ resizeChange }}</pro-action
          >
        </div>
      </pro-resize-observer>
    </el-card>
    <br />
    <el-card header="pro-full-height" shadow="never">
      <pro-action @handler="changeFullHeight">改变高度</pro-action>
      <div
        :style="{ height: fullHeight, border: '1px solid #000000' }"
        class="test-pro-full-height-contanerel"
      >
        <pro-full-height containerSelector=".test-pro-full-height-contanerel">
          <template slot-scope="{ height }">
            <div
              :style="{
                'background-color': '#ececec',
                height: parseInt(height) - 10 + 'px',
                border: '1px solid red',
              }"
            >
              我的高度自适应:[{{ height }}] .test-pro-full-height-contanerel节点
            </div>
          </template>
        </pro-full-height>
      </div>
    </el-card>
    <br />
    <el-form :model="form.searcModel" labelWidth="100px">
      <pro-layout-content-search :baseCount="3" :columnCount="4">
        <pro-select
          key="1"
          uiType="list"
          label="测试1"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value1"
          prop="value1"
        />
        <pro-select
          key="2"
          uiType="list"
          label="测试2"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value2"
          prop="value2"
        />
        <pro-select
          key="3"
          uiType="list"
          label="测试3"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value3"
          prop="value3"
        />
        <pro-select
          key="4"
          uiType="list"
          label="测试4"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value4"
          prop="value4"
        />
        <pro-select
          key="5"
          uiType="list"
          label="测试5"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value5"
          prop="value5"
        />
      </pro-layout-content-search>
      <br />
      <pro-layout-content-search header="查询" :baseCount="3" :columnCount="4">
        <pro-select
          key="1"
          uiType="list"
          label="测试1"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value1"
          prop="value1"
        />
        <pro-select
          key="2"
          uiType="list"
          label="测试2"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value2"
          prop="value2"
        />
        <pro-select
          key="3"
          uiType="list"
          label="测试3"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value3"
          prop="value3"
        />
        <pro-select
          key="4"
          uiType="list"
          label="测试4"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value4"
          prop="value4"
        />
        <pro-select
          key="5"
          uiType="list"
          label="测试5"
          :dataSource="getFromSelectListDataSource"
          v-model="form.searcModel.value5"
          prop="value5"
        />
      </pro-layout-content-search>
    </el-form>
    <br />
    <el-card header="测试pro-layout-formitem">
      <el-form
        :rules="this.myRules"
        :model="form.model"
        labelWidth="100px"
        ref="myform"
      >
        <pro-layout-contaner :gutter="10">
          <pro-select
            uiType="list"
            label="测试1"
            :dataSource="getFromSelectListDataSource"
            v-model="form.model.value1"
            prop="value1"
          />
          <pro-select
            uiType="list"
            label="测试2"
            :dataSource="getFromSelectListDataSource"
            v-model="form.model.value2"
            prop="value2"
          />
          <pro-select
            uiType="list"
            label="测试3"
            :dataSource="getFromSelectListDataSource"
            v-model="form.model.value3"
            prop="value3"
          />
          <pro-select
            uiType="list"
            :span="12"
            labelWidth="250px"
            label="fappend插槽在明细模式下不会丢失"
            :dataSource="getFromSelectListDataSource"
            v-model="form.model.value4"
            prop="value4"
          >
            <pro-action
              text="详情"
              slot="fappend"
              @handler="doGet"
            ></pro-action>
          </pro-select>
        </pro-layout-contaner>
      </el-form>
      <div style="padding: 10px">
        <pro-action
          text="提交验证"
          type="primary"
          @handler="doValidate"
        ></pro-action>
      </div>
    </el-card>
    <br />
    <br />
    <br />
    <pro-action
      command="1-command"
      size="small"
      icon="el-icon-edit"
      @asyncHandler="doHandle"
    >
      按钮
    </pro-action>
    <pro-action
      command="2-command"
      size="small"
      icon="el-icon-edit"
      type="primary"
      @handler="doHandle"
    >
      按钮
    </pro-action>
    <pro-action
      command="3-command"
      size="small"
      icon="el-icon-edit"
      type="primary"
      @handler="doHandle"
    >
      按钮
    </pro-action>
    <pro-action
      command="31-command"
      shouldConfirmTxt="你确定该操作吗?"
      size="small"
      icon="el-icon-edit"
      type="primary"
      @handler="doHandle"
    >
      确认操作
    </pro-action>
    <pro-action
      command="32-command"
      helpText="你确定该操作吗1?"
      size="small"
      icon="el-icon-edit"
      type="primary"
      @handler="doHandle"
    >
      tooltip提示
    </pro-action>
    <pro-action
      command="4-command"
      helpText="你确定该操作吗2?"
      size="small"
      icon="el-icon-edit"
      type="primary"
      @handler="doHandle"
    >
      tooltip提示
    </pro-action>
    <pro-action
      command="5-command"
      helpText="你确定该操作吗3?"
      size="small"
      icon="el-icon-edit"
      type="primary"
      @handler="doHandle"
    >
      tooltip提示
    </pro-action>
    <el-tooltip content="自定义tooltip提示">
      <pro-action
        command="6-command"
        size="small"
        icon="el-icon-edit"
        type="primary"
        @handler="doHandle"
      >
        自定义tooltip提示
      </pro-action>
    </el-tooltip>
    <pro-action
      command="7-command"
      helpText="你确定该操作吗3?"
      size="small"
      icon="el-icon-edit"
      type="primary"
      @handler="doHandle"
    >
      tooltip提示
    </pro-action>
    <br />
    <br />
    <pro-action uiType="group">
      <pro-action
        command="8-command"
        text="你好"
        icon="el-icon-share"
        size="small"
        type="primary"
        @handler="doHandle"
      ></pro-action>
      <pro-action
        command="9-command"
        icon="el-icon-arrow-right"
        size="small"
        type="primary"
        @handler="doHandle"
      ></pro-action>
    </pro-action>

    <pro-action uiType="group" style="margin-left: 10px">
      <pro-action
        command="10-command"
        icon="el-icon-arrow-left"
        size="small"
        type="primary"
        @handler="doHandle"
      ></pro-action>
      <pro-action
        command="11-command"
        icon="el-icon-arrow-right"
        size="small"
        type="primary"
        @handler="doHandle"
      ></pro-action>
      <pro-action
        command="12-command"
        icon="el-icon-arrow-right"
        size="small"
        type="primary"
        @handler="doHandle"
      ></pro-action>
    </pro-action>
    <br />
    <pro-action
      command="13-command"
      helpText="你确定该操作吗3?"
      icon="el-icon-share"
      size="medium"
      ui-type="link"
      @handler="doHandle"
      >link
    </pro-action>
    <br />
    <br />
    <br />
    <pro-action
      command="14-command"
      size="mini"
      @handler="doHandle"
      ui-type="dropdown"
    >
      <template slot="subActions">
        <pro-sub-action
          command="15-command"
          helpText="你确定该操作吗3?"
          @handler="doHandle"
          >你好</pro-sub-action
        >
        <pro-sub-action
          command="16-command"
          helpText="你确定该操作吗222?"
          @handler="doHandle"
          >你好</pro-sub-action
        >
      </template>
    </pro-action>
    <br />
    <br />
    <pro-action
      helpText="你确定该操作吗3?"
      command="17-command"
      icon="el-icon-share"
      :splitButton="true"
      @handler="doHandle"
      text="你好"
      ui-type="dropdown"
    >
      <template slot="subActions">
        <pro-sub-action
          command="18-command"
          icon="el-icon-share"
          shouldConfirmTxt="你确定该操作吗?"
          helpText="你确定该操作吗3?"
          @handler="doHandle"
          >你好111</pro-sub-action
        >
        <pro-sub-action
          command="19-command"
          :divided="true"
          icon="el-icon-share"
          @handler="doHandle"
          >你好2</pro-sub-action
        >
      </template>
    </pro-action>
    <br />
    <br />
    测试toComponentUrl
    <br />
    <pro-action
      toComponentUrl="test-vue"
      productId="1111"
      @customerCallback="aaaaaacaa"
      title="标题1"
      size="small"
      icon="el-icon-edit"
      type="primary"
    >
      测试toComponentUrl
    </pro-action>
    <br />
    <br />
    <pro-action
      toComponentUrl="test-vue"
      @customerCallback="aaaaaacaa"
      :drawer="true"
      productId="3456"
      title="标题2"
      size="small"
      icon="el-icon-edit"
      type="primary"
    >
      测试toComponentUrl
    </pro-action>
    <br />
    <br />
    <br />
    <pro-action
      toRoute="/zh-CN/component/pro-action"
      :params="{ name: 123 }"
      productId="3456"
      title="标题2"
      size="small"
      icon="el-icon-edit"
      type="primary"
    >
      测试toRoute
    </pro-action>
    <br />

    <br />
    <pro-action
      toHref="/#/zh-CN/component/pro-action"
      :params="{ name: 123 }"
      productId="3456"
      title="标题2"
      size="small"
      icon="el-icon-edit"
      type="primary"
    >
      测试toHref
    </pro-action>
    <br />
    <br />
    <el-divider content-position="left">测试http get</el-divider>
    <pro-action size="small" @asyncHandler="doGet"> http get </pro-action>
    <div>{{ JSON.stringify(httpResponse) }}</div>

    <br />
    <br />
    <el-divider content-position="left">测试http post</el-divider>
    <pro-action size="small" @asyncHandler="doPost"> http post </pro-action>
    <div>{{ JSON.stringify(httpResponse1) }}</div>
    <br />

    <br />
    <el-divider content-position="left">测试http post form</el-divider>
    <pro-action size="small" @asyncHandler="doPostForm">
      http post form
    </pro-action>
    <div>{{ JSON.stringify(httpResponse2) }}</div>
    <br />
    <br />
    <el-divider content-position="left">测试数据源</el-divider>
    <div>
      {{ getDataSource.datas }}
    </div>
    <br />
    <br />
    <el-divider content-position="left">测试数据源-lazy=true</el-divider>
    <div>
      <pro-action
        @asyncHandler="() => getDataSource1.loadDatas()"
        text="调研loadDatas加载"
      />
    </div>
    <div>
      {{ getDataSource1.datas }}
    </div>
    <br />
    <el-divider content-position="left">测试数据源-fieldMap字段转换</el-divider>
    <div>
      <pro-action
        @asyncHandler="() => getDataSource2.loadDatas()"
        text="调研loadDatas加载111"
      />
    </div>
    <div>
      {{ getDataSource2.formatDatas }}
    </div>
    <br />
    <br />
    <el-divider content-position="left"
      >测试TreeRootObject数据源-fieldMap字段转换</el-divider
    >
    <div>
      <pro-action
        @asyncHandler="() => getDataSource3.loadDatas()"
        text="调研loadDatas加载"
      />
    </div>
    <div>
      {{ getDataSource3.formatDatas }}
    </div>
    <br />
    <br />
    <el-divider content-position="left"
      >测试TreeRootArray数据源-fieldMap字段转换</el-divider
    >
    <div>
      <pro-action
        @asyncHandler="() => getDataSource4.loadDatas()"
        text="调研loadDatas加载"
      />
    </div>
    <div>
      {{ getDataSource4.formatDatas }}
    </div>
    <br />
    <el-card>
      <el-divider content-position="left">测试多实例数据源111</el-divider>
      <pro-datasource :dataSource="getDataSourcemultiple1">
        <template slot-scope="dataSource">
          <div>
            {{}}
            <div>
              <pro-action
                @asyncHandler="() => dataSource.loadDatas()"
                text="loadDatas(重新加载数据)"
              />
              <br />
              <pro-action
                @asyncHandler="dataSource.clearDatas()"
                text="clearDatas(清楚数据)"
              />
            </div>
            <div>原始数据:</div>
            <div>
              {{ dataSource.datas }}
            </div>
            <div>-------------------------------------------</div>
            <div>格式化数据:</div>

            <div>
              {{  dataSource.formatDatas }}
            </div>
          </div>
        </template>
      </pro-datasource>
      <br />
      <pro-datasource :dataSource="getDataSourcemultiple1">
        <template slot-scope="dataSource">
          <div>
            <div>
              <pro-action
                @asyncHandler="() => dataSource.loadDatas()"
                text="loadDatas(重新加载数据)"
              />
              <br />
              <pro-action
                @asyncHandler="dataSource.clearDatas()"
                text="clearDatas(清楚数据)"
              />
            </div>
            <div>原始数据:</div>
            <div>
              {{  dataSource.datas }}
            </div>
            <div>-------------------------------------------</div>
            <div>格式化数据:</div>

            <div>
              {{  dataSource.formatDatas }}
            </div>
          </div>
        </template>
      </pro-datasource>
      <br />
      <div>数组转换tree useTreeArrayDataSource</div>
      <div>
        {{ JSON.stringify(useTreeArrayDataSource.formatDatas, null, "") }}
      </div>
    </el-card>
    <br />
    <el-card header="测试 元素布局组件ProLayoutContaner">
      <el-divider content-position="left"
        >列数columnCount={{ columnCount }}</el-divider
      >
      <el-slider v-model="columnCount" :min="1" :max="6" :step="1"></el-slider>
      <pro-layout-contaner
        :columnCount="columnCount"
        :gutter="10"
        style="background: #ececec"
      >
        <div style="height: 30px; background: red">1</div>
        <div style="height: 30px; background: red">2</div>
        <div style="height: 30px; background: red">3</div>
        <div style="height: 30px; background: red">4</div>
        <div style="height: 30px; background: red">5</div>
        <div style="height: 30px; background: red">6</div>
      </pro-layout-contaner>

      <el-divider content-position="left">gutter={{ gutter1 }} 间隔</el-divider>
      <el-slider v-model="gutter1" :min="0" :max="40" :step="1"></el-slider>
      <pro-layout-contaner
        :columnCount="3"
        :gutter="gutter1"
        style="background: #ececec"
      >
        <div style="height: 30px; background: red">1</div>
        <div style="height: 30px; background: red">2</div>
        <div style="height: 30px; background: red">3</div>
        <div style="height: 30px; background: red">4</div>
        <div style="height: 30px; background: red">5</div>
        <div style="height: 30px; background: red">6</div>
      </pro-layout-contaner>
      <el-divider content-position="left"
        >左(宽度为内容宽度) 中(剩余宽度) 右(宽度为内容宽度)</el-divider
      >
      <pro-layout-contaner :gutter="10" style="background: #ececec">
        <div style="height: 30px; background: red" flex="none">左</div>
        <div style="height: 30px; background: red" flex="auto">中</div>
        <div style="height: 30px; background: red" flex="none">右</div>
      </pro-layout-contaner>
      <el-divider content-position="left"
        >左(宽度为内容宽度) 右(剩余宽度)</el-divider
      >
      <pro-layout-contaner :gutter="10" style="background: #ececec">
        <div style="height: 30px; background: red" flex="none">左</div>
        <div style="height: 30px; background: red" flex="auto">中</div>
      </pro-layout-contaner>
      <el-divider content-position="left"
        >左(宽度为内容宽度, :offset="2") 右(剩余宽度)</el-divider
      >
      <pro-layout-contaner :gutter="10" style="background: #ececec">
        <div style="height: 30px; background: red" flex="none" :offset="2">
          左
        </div>
        <div style="height: 30px; background: red" flex="auto">中</div>
      </pro-layout-contaner>
      <el-divider content-position="left">垂直居中align=middle</el-divider>
      <pro-layout-contaner
        :gutter="10"
        style="background: #ececec"
        align="middle"
      >
        <div style="background: red" flex="none" :offset="2">皖</div>
        <div style="background: red" flex="auto">
          中<br />国<br />加<br />油
        </div>
      </pro-layout-contaner>
      <el-divider content-position="left">顶部居中align=top</el-divider>
      <pro-layout-contaner :gutter="10" style="background: #ececec" align="top">
        <div style="background: red" flex="none" :offset="2">皖</div>
        <div style="background: red" flex="auto">
          中<br />国<br />加<br />油
        </div>
      </pro-layout-contaner>

      <el-divider content-position="left"
        >optimizationLazy=true(默认)</el-divider
      >
      <span>
        optimizationLazy=true(默认) 必须设置key: 初始化的时候如果v-show =
        false,则不会渲染
      </span>
      <pro-action
        @handler="
          () => {
            hidenCol = !hidenCol;
          }
        "
        text="点击我控制隐现(右)"
      />
      <br />
      <br />
      <pro-layout-contaner
        :gutter="10"
        style="background: #ececec"
        :optimizationLazy="true"
      >
        <div style="height: 30px; background: red" flex="none">左</div>
        <div style="height: 30px; background: red" flex="auto">中</div>
        <div
          key="123"
          style="height: 30px; background: red"
          flex="none"
          v-show="hidenCol"
        >
          右
        </div>
      </pro-layout-contaner>
    </el-card>
    <br />
    <el-card header="测试pro-layout-table dataSource绑定及header、cell插槽">
      <pro-datasource :dataSource="getDataSourceTable">
        <template slot-scope="dataSource">
          <pro-data-table
            :columns="colconfigs"
            size="mini"
            :dataSource="dataSource"
          >
            <template slot="yearContent" slot-scope="{ row, store, column }">
              <span>{{ row.year }}年(测试作用域插槽)</span>
            </template>
            <template slot="yearHeader" slot-scope="{ column, store }">
              <span>{{ column.label }}-(作用域插槽)</span>
            </template>
          </pro-data-table>
        </template>
      </pro-datasource>
    </el-card>
    <el-card header="测试pro-layout-table 扩展行">
      <pro-datasource :dataSource="getDataSourceTable">
        <template slot-scope="dataSource">
          <pro-data-table
            :columns="colconfigs"
            size="mini"
            :dataSource="dataSource"
          >
            <!-- 包含expand插槽会自动启用扩展行 -->
            <template slot="expand" slot-scope="{ column, store, row }">
              <span>年度: {{ row.year }}</span>
            </template>
          </pro-data-table>
        </template>
      </pro-datasource>
    </el-card>
    <el-card
      header="测试pro-layout-table 单选及双向绑定selectRows属性, 支持跨页选择"
    >
      <div>
        <pro-datasource :dataSource="getDataSourceTable">
          <template slot-scope="dataSource">
            <pro-data-table
              v-bind:selectRows.sync="selectRows"
              :select-model="true"
              :columns="colconfigs"
              size="mini"
              :dataSource="dataSource"
              rowKey="id"
            />
          </template>
        </pro-datasource>
        <span>
          <br />
          已选:
          <br />
          {{ selectRows }}
        </span>
      </div>
    </el-card>

    <el-card
      header="测试pro-layout-table 多选及双向绑定selectRows属性, 支持跨页选择"
    >
      <div>
        <pro-datasource :dataSource="getDataSourceTable">
          <template slot-scope="dataSource">
            <pro-data-table
              v-bind:selectRows.sync="selectRows1"
              select-model="multiple"
              :columns="colconfigs"
              size="mini"
              :dataSource="dataSource"
              rowKey="id"
            />
          </template>
        </pro-datasource>
        <span>
          <br />
          已选:
          <br />
          {{ selectRows1 }}
        </span>
      </div>
    </el-card>

    <el-card header="测试pro-layout-table 多选模式，支持点击行选择">
      <div>
        <pro-datasource :dataSource="getDataSourceTable">
          <template slot-scope="dataSource">
            <pro-data-table
              v-bind:selectRows.sync="selectRows2"
              enable-click-row-select
              select-model="multiple"
              :columns="colconfigs"
              size="mini"
              :dataSource="dataSource"
              rowKey="id"
            />
          </template>
        </pro-datasource>
        <span>
          <br />
          已选:
          <br />
          {{ selectRows2 }}
        </span>
      </div>
    </el-card>

    <el-card header="测试pro-layout-table header分组样例">
      <div>
        <pro-datasource :dataSource="getDataSourceTable">
          <template slot-scope="dataSource">
            <pro-data-table
              :columns="groupColConfigs"
              size="mini"
              :dataSource="dataSource"
              rowKey="id"
            >
              <template slot="yearContent" slot-scope="{ row, store, column }">
                <span>{{ row.year }}年(测试作用域插槽)</span>
              </template>
              <template slot="yearHeader" slot-scope="{ column, store }">
                <span>{{ column.label }}-(作用域插槽)</span>
              </template>
            </pro-data-table>
          </template>
        </pro-datasource>
      </div>
    </el-card>

    <el-card header="测试pro-layout-table 普通序号索引">
      <div>
        <pro-datasource :dataSource="getDataSourceTable">
          <template slot-scope="dataSource">
            <pro-data-table
              :columns="colconfigs"
              enable-index
              size="mini"
              :dataSource="dataSource"
              rowKey="id"
            />
          </template>
        </pro-datasource>
      </div>
    </el-card>

    <el-card header="测试pro-layout-table 严格模式序号索引(会累加currentPage)">
      <div>
        <pro-datasource :dataSource="getDataSourceTable">
          <template slot-scope="dataSource">
            <pro-data-table
              :columns="colconfigs"
              size="mini"
              enable-strict-index
              :dataSource="dataSource"
              rowKey="id"
            />
          </template>
        </pro-datasource>
      </div>
    </el-card>

    <el-card header="测试pro-layout-table tree静态数据- 单选">
      <div>
        <pro-data-table
          :columns="colconfigs"
          v-bind:selectRows.sync="selectRows6"
          :select-model="true"
          size="mini"
          :dataSource="getDataSourceTreeTable"
          rowKey="id"
          :tree-props="{ children: 'children1' }"
        />
        <div>
          {{ selectRows6 }}
        </div>
      </div>
    </el-card>

    <el-card header="测试pro-layout-table tree静态数据- 多选">
      <div>
        <pro-data-table
          :columns="colconfigs"
          v-bind:selectRows.sync="selectRows7"
          select-model="multiple"
          size="mini"
          :dataSource="getDataSourceTreeTable"
          rowKey="id"
          :tree-props="{ children: 'children1' }"
        />
        <div>
          {{ selectRows7 }}
        </div>
      </div>
    </el-card>
    <el-card header="测试pro-layout-table tree 按需加载数据">
      <div>
        <pro-data-table
          lazy
          :columns="colconfigs"
          v-bind:selectRows.sync="selectRows7"
          select-model="multiple"
          size="mini"
          :dataSource="getDataSourceAsyncTreeTable"
          rowKey="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        />
        <div>
          {{ selectRows7 }}
        </div>
      </div>
    </el-card>

    <el-card
      header="测试pro-layout-table footer 后端提供footer分组数据:{其他实现请参考文档}"
    >
      <pro-datasource :dataSource="getDataSourceGroupTable">
        <template slot-scope="dataSource">
          <pro-data-table
            :columns="colconfigs"
            size="mini"
            :dataSource="dataSource"
            rowKey="id"
            :enablePagination="false"
            show-summary
          />
        </template>
      </pro-datasource>
    </el-card>

    <el-card header="测试pro-layout-table 基于数据驱动的行分组">
      <pro-data-table
        :columns="colconfigs"
        size="mini"
        :dataSource="getDataSourceRowGroupTable"
        rowKey="id"
        :enablePagination="false"
        show-summary
      />
    </el-card>

    <el-card header="测试 pro-data-tree 绑定数据源">
      <pro-datasource :dataSource="getTreeDataSource">
        <template slot-scope="dataSource">
          <pro-data-tree
            :dataSource="dataSource"
            v-loading="dataSource.loading"
          />
        </template>
      </pro-datasource>
    </el-card>
    <el-card header="测试 pro-data-tree 绑定数据源-lazy">
      <pro-data-tree lazy :dataSource="getTreeDataAsyncSource" nodeKey="id" />
    </el-card>
    <el-card header="测试 pro-data-tree 绑定数据源-nodeContent插槽">
      <pro-data-tree lazy :dataSource="getTreeDataAsyncSource" nodeKey="id">
        <template slot="nodeContent" slot-scope="{ node }">
          <div>我是插槽: {{ node.label }}</div>
        </template>
      </pro-data-tree>
    </el-card>

    <el-card header="测试 pro-data-tree 双向绑定选择-单选">
      <pro-data-tree
        :dataSource="getTreeDataSource"
        nodeKey="id"
        :select-model="true"
        v-bind:selectNodes.sync="selectNodes1"
      />
      <div>
        你的选择:<br />
        {{ selectNodes1 }}
      </div>
    </el-card>

    <el-card header="测试 pro-data-tree 双向绑定选择-多选">
      <pro-data-tree
        :dataSource="getTreeDataSource"
        nodeKey="id"
        select-model="multiple"
        v-bind:selectNodes.sync="selectNodes2"
      />
      <div>
        你的选择:<br />
        {{ selectNodes2 }}
      </div>
    </el-card>

    <el-card header="测试 pro-contextmenu">
      <pro-contextmenu>
        <div
          slot="reference"
          style="
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #ececec;
          "
        ></div>
        <pro-contextmenu-item disabled icon="el-icon-edit"
          >操作1</pro-contextmenu-item
        >
        <pro-contextmenu-item icon="el-icon-plus">操作2</pro-contextmenu-item>
        <pro-contextmenu-item icon="el-icon-video-play"
          >操作3</pro-contextmenu-item
        >
        <pro-contextmenu-item icon="el-icon-share">操作4</pro-contextmenu-item>
      </pro-contextmenu>
    </el-card>

    <el-card header="测试 pro-contextmenu 禁用">
      <pro-contextmenu disabled>
        <div
          slot="reference"
          style="
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #ececec;
          "
        ></div>
        <pro-contextmenu-item disabled icon="el-icon-edit"
          >操作1</pro-contextmenu-item
        >
        <pro-contextmenu-item icon="el-icon-plus">操作2</pro-contextmenu-item>
        <pro-contextmenu-item icon="el-icon-video-play"
          >操作3</pro-contextmenu-item
        >
        <pro-contextmenu-item icon="el-icon-share">操作4</pro-contextmenu-item>
      </pro-contextmenu>
    </el-card>

    <el-card header="测试 pro-contextmenu Size设置">
      <pro-contextmenu size="small">
        <div
          slot="reference"
          style="
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #ececec;
          "
        ></div>
        <pro-contextmenu-item disabled icon="el-icon-edit"
          >操作1</pro-contextmenu-item
        >
        <pro-contextmenu-item icon="el-icon-plus">操作2</pro-contextmenu-item>
        <pro-contextmenu-item icon="el-icon-video-play"
          >操作3</pro-contextmenu-item
        >
        <pro-contextmenu-item icon="el-icon-share">操作4</pro-contextmenu-item>
      </pro-contextmenu>
    </el-card>
    <el-card header="测试 pro-contextmenu handler设置">
      <pro-contextmenu size="small">
        <div
          slot="reference"
          style="
            display: inline-block;
            width: 100px;
            height: 100px;
            background: #ececec;
          "
        ></div>
        <pro-contextmenu-item
          command="a"
          disabled
          icon="el-icon-edit"
          @handler="doHandler1"
          >操作1</pro-contextmenu-item
        >
        <pro-contextmenu-item
          command="b"
          icon="el-icon-plus"
          @handler="doHandler1"
          >操作2</pro-contextmenu-item
        >
        <pro-contextmenu-item
          command="c"
          icon="el-icon-video-play"
          @handler="doHandler1"
          >操作3</pro-contextmenu-item
        >
        <pro-contextmenu-item
          command="d"
          icon="el-icon-share"
          @handler="doHandler1"
          >操作4</pro-contextmenu-item
        >
      </pro-contextmenu>
    </el-card>

    <el-card header="测试 pro-data-tree节点 增加右键菜单">
      <pro-data-tree :dataSource="getTreeDataSource" nodeKey="id">
        <template slot="nodeContent" slot-scope="{ node }">
          <pro-contextmenu size="small">
            <div slot="reference">{{ node.label }}</div>
            <pro-contextmenu-item disabled icon="el-icon-edit"
              >操作1-{{ node.label }}</pro-contextmenu-item
            >
            <pro-contextmenu-item icon="el-icon-plus"
              >操作2-{{ node.label }}</pro-contextmenu-item
            >
            <pro-contextmenu-item icon="el-icon-video-play"
              >操作3-{{ node.label }}</pro-contextmenu-item
            >
            <pro-contextmenu-item icon="el-icon-share"
              >操作4-{{ node.label }}</pro-contextmenu-item
            >
          </pro-contextmenu>
        </template>
      </pro-data-tree>
    </el-card>
    <el-card header="测试 pro-data-table节点 增加右键菜单">
      <pro-datasource :dataSource="getDataSourceTable">
        <template slot-scope="dataSource">
          <pro-data-table
            :columns="colconfigs"
            size="mini"
            :dataSource="dataSource"
          >
            <template slot="yearContent" slot-scope="{ row, store, column }">
              <pro-contextmenu size="small">
                <div slot="reference">{{ row.year }}年-(右键)</div>
                <pro-contextmenu-item disabled icon="el-icon-edit"
                  >操作1-{{ row.id }}</pro-contextmenu-item
                >
                <pro-contextmenu-item icon="el-icon-plus"
                  >操作2-{{ row.id }}</pro-contextmenu-item
                >
                <pro-contextmenu-item icon="el-icon-video-play"
                  >操作3-{{ row.id }}</pro-contextmenu-item
                >
                <pro-contextmenu-item icon="el-icon-share"
                  >操作4-{{ row.id }}</pro-contextmenu-item
                >
              </pro-contextmenu>
            </template>
          </pro-data-table>
        </template>
      </pro-datasource>
    </el-card>

    <el-card header="表单pro-select-radios: dataSource=YES_OR_NOT">
      <pro-select-radios
        flex="none"
        :gutter="10"
        v-model="selectRadioValue1"
        dataSource="YES_OR_NOT"
        :fieldMap="{ label: 'name', value: 'code' }"
      ></pro-select-radios>
      <div>选择结果: {{ selectRadioValue1 }}</div>
    </el-card>
    <el-card
      header="表单pro-select-radios dataSource=dataSouce mixin, columnCount=2"
    >
      <pro-select-radios
        v-model="selectRadioValue2"
        :dataSource="getFromDictDataSource"
        :gutter="10"
        :columnCount="2"
      ></pro-select-radios>
      <div>选择结果: {{ selectRadioValue2 }}</div>
    </el-card>
    <el-card header="表单pro-select-radios dataSource=[] columnCount=6 右对齐">
      <pro-select-radios
        v-model="selectRadioValue3"
        :columnCount="6"
        :gutter="10"
        text-align="right"
        justify="end"
        :dataSource="[
          { label: '是', value: '1' },
          { label: '否', value: '2' },
          { label: '不确定', value: '3' },
          { label: '未知', value: '4' },
        ]"
      ></pro-select-radios>
      <div>选择结果: {{ selectRadioValue3 }}</div>
    </el-card>
    <el-card header="表单pro-select-radios dataSourcemixin=[] 固定宽度 右对齐">
      <pro-select-radios
        v-model="selectRadioValue4"
        :gutter="10"
        :dataSource="getFromStaticDataSource"
        text-align="right"
        justify="end"
        flex="100px"
      ></pro-select-radios>
      <div>选择结果: {{ selectRadioValue4 }}</div>
    </el-card>
    <el-card
      header="表单pro-select-radios dataSourcemixin=context[] radio-button 固定宽度 中间对齐"
    >
      <pro-select-radios
        v-model="selectRadioValue5"
        radio-button
        :dataSource="getFromContextStaticDataSource"
        text-align="center"
        justify="center"
        flex="none"
      ></pro-select-radios>
      <div>选择结果: {{ selectRadioValue5 }}</div>
    </el-card>
    <el-card
      header="表单pro-select-radios dataSourcemixin=context[] radio-button 禁用"
    >
      <pro-select-radios
        disabled
        v-model="selectRadioValue6"
        radio-button
        :dataSource="getFromContextStaticDataSource"
        text-align="center"
        justify="center"
        flex="none"
      ></pro-select-radios>
      <div>选择结果: {{ selectRadioValue6 }}</div>
    </el-card>
    <el-card header="表单pro-select-radios dataSourcemixin=context[] 禁用">
      <pro-select-radios
        disabled
        v-model="selectRadioValue7"
        :gutter="10"
        :dataSource="getFromContextStaticDataSource"
        text-align="center"
        justify="center"
        flex="none"
      ></pro-select-radios>
      <div>选择结果: {{ selectRadioValue7 }}</div>
    </el-card>

    <el-card header="表单pro-select-checks ">
      <pro-select-checks
        v-model="selectRadioValue8"
        :gutter="10"
        :dataSource="getFromContextStaticDataSource"
        text-align="center"
        flex="none"
      ></pro-select-checks>
      <div>选择结果: {{ selectRadioValue8 }}</div>
    </el-card>
    <el-card header="表单pro-select-checks disabled">
      <pro-select-checks
        disabled
        v-model="selectRadioValue9"
        :gutter="10"
        :dataSource="getFromContextStaticDataSource"
        text-align="center"
        flex="none"
      ></pro-select-checks>
      <div>选择结果: {{ selectRadioValue9 }}</div>
    </el-card>

    <el-card header="表单pro-select-checks check-button">
      <pro-select-checks
        check-button
        v-model="selectRadioValue10"
        :dataSource="getFromContextStaticDataSource"
        text-align="center"
        flex="none"
      ></pro-select-checks>
      <div>选择结果: {{ selectRadioValue10 }}</div>
    </el-card>

    <el-card
      header="表单pro-select-checks  text-align=left "
      class="show-border"
    >
      <pro-select-checks
        v-model="selectRadioValue11"
        :gutter="10"
        :dataSource="getFromContextStaticDataSource"
        text-align="left"
      ></pro-select-checks>
      <div>选择结果: {{ selectRadioValue11 }}</div>
    </el-card>
    <el-card
      header="表单pro-select-checks  text-align=right "
      class="show-border"
    >
      <pro-select-checks
        v-model="selectRadioValue12"
        :gutter="10"
        :dataSource="getFromContextStaticDataSource"
        text-align="right"
      ></pro-select-checks>
      <div>选择结果: {{ selectRadioValue12 }}</div>
    </el-card>
    <el-card
      header="表单pro-select-checks  text-align=center "
      class="show-border"
    >
      <pro-select-checks
        v-model="selectRadioValue13"
        :gutter="10"
        :dataSource="getFromContextStaticDataSource"
        text-align="center"
      ></pro-select-checks>
      <div>选择结果: {{ selectRadioValue13 }}</div>
    </el-card>

    <el-card header="表单pro-select-list ">
      <pro-select-list
        size="mini"
        remote-filter
        show-overflow-tooltip
        v-model="selectRadioValue14"
        :dataSource="getFromSelectListDataSource"
      ></pro-select-list>
      <div>选择结果: {{ selectRadioValue14 }}</div>
    </el-card>
    <el-card header="表单pro-select-tree 单选">
      <pro-select-tree
        size="mini"
        show-overflow-tooltip
        :selectNodesIncludes="{ leafOnly: true }"
        v-model="selectRadioValue15"
        :dataSource="getTreeDataSource"
      ></pro-select-tree>
      <div>选择结果: {{ selectRadioValue15 }}</div>
    </el-card>

    <el-card header="表单pro-select-tree 仅叶子节点">
      <pro-select-tree
        select-model="multiple"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue17"
        :dataSource="getTreeDataSource"
      ></pro-select-tree>
      <div>选择结果: {{ selectRadioValue17 }}</div>
    </el-card>

    <el-card header="表单pro-select-tree 包含父节点">
      <pro-select-tree
        select-model="multiple"
        show-search
        :selectNodesIncludes="{ leafOnly: false }"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue18"
        :dataSource="getTreeDataSource"
      ></pro-select-tree>
      <div>选择结果: {{ selectRadioValue18 }}</div>
    </el-card>

    <el-card header="表单pro-select-table 多选">
      <pro-select-table
        :columns="colconfigs1"
        show-search
        select-model="multiple"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue19"
        :dataSource="getFromSelectTableDataSource"
      ></pro-select-table>
      <div>选择结果: {{ selectRadioValue19 }}</div>
    </el-card>

    <el-card header="表单pro-select-table 多选服务端搜索">
      <pro-select-table
        :columns="colconfigs1"
        remote-filter
        show-search
        select-model="multiple"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue20"
        :dataSource="getFromSelectTableDataSource"
      ></pro-select-table>
      <div>选择结果: {{ selectRadioValue20 }}</div>
    </el-card>

    <el-card header="表单pro-select-table  单选">
      <pro-select-table
        :columns="colconfigs1"
        remote-filter
        show-search
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue21"
        :dataSource="getFromSelectTableDataSource"
      ></pro-select-table>
      <div>选择结果: {{ selectRadioValue21 }}</div>
    </el-card>
    <el-card header="表单pro-select-grouplist  单选">
      <pro-select-grouplist
        forgroup="group"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue22"
        :dataSource="getFromSelectGroupList"
      ></pro-select-grouplist>
      <div>选择结果: {{ selectRadioValue22 }}</div>
    </el-card>
    <el-card header="表单pro-select-grouplist  单选本地搜索">
      <pro-select-grouplist
        forgroup="group"
        show-search
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue23"
        :dataSource="getFromSelectGroupList"
      ></pro-select-grouplist>
      <div>选择结果: {{ selectRadioValue23 }}</div>
    </el-card>
    <el-card header="表单pro-select-grouplist  单选 远程搜索">
      <pro-select-grouplist
        forgroup="group"
        remote-filter
        show-search
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue24"
        :dataSource="getFromSelectGroupList"
      ></pro-select-grouplist>
      <div>选择结果: {{ selectRadioValue24 }}</div>
    </el-card>
    <el-card header="表单pro-select-grouplist  多选">
      <pro-select-grouplist
        forgroup="group"
        :show-search="false"
        select-model="multiple"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue25"
        :dataSource="getFromSelectGroupList"
      ></pro-select-grouplist>
      <div>选择结果: {{ selectRadioValue25 }}</div>
    </el-card>
    <el-card header="表单pro-select-grouplist  多选 搜索">
      <pro-select-grouplist
        forgroup="group"
        show-search
        select-model="multiple"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue26"
        :dataSource="getFromSelectGroupList"
      ></pro-select-grouplist>
      <div>选择结果: {{ selectRadioValue26 }}</div>
    </el-card>
    <el-card header="表单pro-select-grouplist  多选 远程搜索">
      <pro-select-grouplist
        forgroup="group"
        remote-filter
        show-search
        select-model="multiple"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue27"
        :dataSource="getFromSelectGroupList"
      ></pro-select-grouplist>
      <div>选择结果: {{ selectRadioValue27 }}</div>
    </el-card>

    <el-card
      header="表单pro-select-customer 基于业务定制个性化下拉选择--下拉模式"
    >
      <pro-select-customer
        size="mini"
        show-overflow-tooltip
        select-model="multiple"
        v-model="selectRadioValue28"
        :dataSource="getFromSelectListDataSource"
      >
        <pro-select-customer-example />
      </pro-select-customer>
      <div>选择结果: {{ selectRadioValue28 }}</div>
    </el-card>
    <el-card
      header="表单pro-select-customer 基于业务定制个性化下拉选择--模态框模式"
    >
      <pro-select-customer
        size="mini"
        openModel="modal"
        select-model="multiple"
        show-overflow-tooltip
        v-model="selectRadioValue29"
        :dataSource="getFromSelectListDataSource"
      >
        <pro-select-customer-example />
      </pro-select-customer>
      <div>选择结果: {{ selectRadioValue29 }}</div>
    </el-card>

    <el-card header="表单pro-select-cascader 级联选择">
      <pro-datasource :dataSource="getFromSelectCascaderDataSource">
        <template slot-scope="dataSource">
          <pro-select-cascader
            selectModel="multiple"
            :props="{ expandTrigger: 'hover' }"
            size="mini"
            show-overflow-tooltip
            v-model="selectRadioValue33"
            :dataSource="dataSource"
          />
        </template>
      </pro-datasource>
      <div>选择结果: {{ selectRadioValue33 }}</div>
    </el-card>

    <el-card header="表单pro-select-cascader 级联选择--自定义panel">
      <pro-datasource :dataSource="getFromSelectCascaderDataSource">
        <template slot-scope="dataSource">
          <pro-select-cascader
            :props="{ expandTrigger: 'hover' }"
            size="mini"
            show-overflow-tooltip
            v-model="selectRadioValue31"
            :dataSource="dataSource"
          >
            <template
              slot="customerCascaderPanel"
              slot-scope="cascaderPanelContext"
            >
              <pro-select-cascader-panel-default
                :context="cascaderPanelContext"
              />
            </template>
          </pro-select-cascader>
        </template>
      </pro-datasource>
      <div>选择结果: {{ selectRadioValue31 }}</div>
    </el-card>

    <el-card header="表单pro-select-cascader 级联选择--自定义panel--lazy">
      <pro-select-cascader
        :props="{ lazy: true }"
        size="mini"
        show-overflow-tooltip
        v-model="selectRadioValue32"
        :dataSource="getFromSelectCascaderLazyDataSource"
      >
        <template
          slot="customerCascaderPanel"
          slot-scope="cascaderPanelContext"
        >
          <pro-select-cascader-panel-default :context="cascaderPanelContext" />
        </template>
      </pro-select-cascader>
      <div>选择结果: {{ selectRadioValue32 }}</div>
    </el-card>
  </div>
</template>

<script>
import Vue from "vue";
import { getComponentByUrl } from "../components/async-chunk/import-call";
import { ProConfigProvideMixin } from "mars-pro/packages/pro-config-provide";
import { get, post, postForm } from "mars-pro/src/pro/request";
import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
import { vRequired } from "mars-pro/src/pro/rule";
import createState from "mars-pro/src/pro/createState";
import IconComponent from "../components/icons";
import onlineRender from "../components/online/render.vue";
const selectTableCcolumns = [
  { prop: "label", label: "名称", width: "120px" },
  { prop: "remark", label: "备注", minWidth: "200px" },
];
const colconfigs = [
  { prop: "year", label: "年" },
  { prop: "month", label: "月" },
  { prop: "day", label: "日" },
  { prop: "max", label: "最大" },
  { prop: "min", label: "最小" },
];
const colconfigs1 = [
  { prop: "name", label: "名称", width: "200px" },
  { prop: "creaater", label: "创建者", width: "120px" },
];
const groupColConfigs = [
  {
    label: "时间",
    children: [
      { prop: "year", label: "年" },
      { prop: "month", label: "月" },
      { prop: "day", label: "日" },
    ],
  },
  { prop: "max", label: "最大" },
  { prop: "min", label: "最小" },
];

// 模拟http请求- mock
function useResponse(request, response) {
  const { current, pageSize } = request.body;
  response.$delay(100, {
    total: 100,
    list: [
      {
        year: "2021",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "ax-1-" + current,
      },
      {
        year: "2021",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "a-2-" + current,
      },
      {
        year: "2021",
        month: "1",
        day: "2",
        max: 10,
        min: 20,
        id: "a-2dsds-" + current,
      },
      {
        year: "2021",
        month: "1",
        day: "3",
        max: 10,
        min: 20,
        id: "axxx-3-" + current,
      },
      {
        year: "2021",
        month: "1",
        day: "3",
        max: 10,
        min: 20,
        id: "axxxxx-3-" + current,
      },
      {
        year: "2021",
        month: "1",
        day: "3",
        max: 10,
        min: 20,
        id: "a-3-" + current,
      },
      {
        year: "2022",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "a-4-" + current,
      },
      {
        year: "2022",
        month: "1",
        day: "2",
        max: 10,
        min: 20,
        id: "a-5-" + current,
      },
      {
        year: "2022",
        month: "1",
        day: "3",
        max: 99,
        min: 20,
        id: "a-6-" + current,
      },
      {
        year: "2023",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "a-7-" + current,
      },
      {
        year: "2023",
        month: "1",
        day: "2",
        max: 10,
        min: 20,
        id: "a-8-" + current,
      },
      {
        year: "2024",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "a-9-" + current,
      },
    ],
    //模拟统计数据
    summary: {
      sumText: "某某统计",
      max: 99,
      min: 11,
    },
  });
}

//模拟http请求- mock
function useResponseTree(request, response) {
  const { current, pageSize } = request.body;
  response.$delay(100, {
    total: 100,
    list: [
      {
        year: "2021",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "a-1-" + current,
        children1: [
          {
            year: "2021",
            month: "1",
            day: "1",
            max: 10,
            min: 20,
            id: "1-a-1-" + current,
          },
          {
            year: "2021",
            month: "1",
            day: "1",
            max: 10,
            min: 20,
            id: "2-a-1-" + current,
          },
        ],
      },
      {
        year: "2021",
        month: "1",
        day: "2",
        max: 10,
        min: 20,
        id: "a-2-" + current,
        children1: [
          {
            year: "2021",
            month: "1",
            day: "2",
            max: 10,
            min: 20,
            id: "1-a-2-" + current,
          },
          {
            year: "2021",
            month: "1",
            day: "2",
            max: 10,
            min: 20,
            id: "2-a-2-" + current,
          },
        ],
      },
      {
        year: "2021",
        month: "1",
        day: "3",
        max: 10,
        min: 20,
        id: "a-3-" + current,
      },
      {
        year: "2022",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "a-4-" + current,
      },
      {
        year: "2022",
        month: "1",
        day: "2",
        max: 10,
        min: 20,
        id: "a-5-" + current,
      },
      {
        year: "2022",
        month: "1",
        day: "3",
        max: 10,
        min: 20,
        id: "a-6-" + current,
      },
      {
        year: "2023",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "a-7-" + current,
      },
      {
        year: "2023",
        month: "1",
        day: "2",
        max: 10,
        min: 20,
        id: "a-8-" + current,
      },
      {
        year: "2024",
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: "a-9-" + current,
      },
    ],
  });
}
//模拟http请求- mock 按需加载表格
let uuid = 1;
function useResponseAsyncTree(request, response) {
  const { current, pageSize, query } = request.body;
  uuid++;
  response.$delay(100, {
    total: 100,
    list: [
      {
        year: "2021" + (query || ""),
        month: "1",
        day: "3",
        max: 10,
        min: 20,
        id: uuid + "a-3-" + current,
        hasChildren: true,
      },
      {
        year: "2022" + (query || ""),
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: uuid + "a-4-" + current,
      },
      {
        year: "2022" + (query || ""),
        month: "1",
        day: "2",
        max: 10,
        min: 20,
        id: uuid + "a-5-" + current,
      },
      {
        year: "2022" + (query || ""),
        month: "1",
        day: "3",
        max: 10,
        min: 20,
        id: uuid + "a-6-" + current,
      },
      {
        year: "2023" + (query || ""),
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: uuid + "a-7-" + current,
      },
      {
        year: "2023" + (query || ""),
        month: "1",
        day: "2",
        max: 10,
        min: 20,
        id: uuid + "a-8-" + current,
      },
      {
        year: "2024" + (query || ""),
        month: "1",
        day: "1",
        max: 10,
        min: 20,
        id: uuid + "a-9-" + current,
      },
    ],
  });
}

// 静态树形数据
function useTreeResponse(request, response) {
  const { query } = request.body;
  return response.$delay(100, {
    list: [
      {
        id: 1 + "-" + (query || ""),
        label: "一级 1",
        text: "一级 1-text",
        children: [
          {
            id: 4 + "-" + (query || ""),
            text: "二级 1-1-text",
            label: "二级 1-1",
            children: [
              {
                id: 9 + "-" + (query || ""),
                text: "三级 1-1-1-text",
                label: "三级 1-1-1",
              },
              {
                id: 10 + "-" + (query || ""),
                text: "三级 1-1-2-text",
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2 + "-" + (query || ""),
        label: "一级 2",
        text: "一级 2-text",
        children: [
          {
            id: 5 + "-" + (query || ""),
            text: "二级 2-1-text",
            label: "二级 2-1",
          },
          {
            id: 6 + "-" + (query || ""),
            text: "二级 2-2-text",
            label: "二级 2-2",
          },
        ],
      },
      {
        id: 3 + "-" + (query || ""),
        label: "一级 3",
        text: "一级 3-text",
        children: [
          {
            id: 7 + "-" + (query || ""),
            text: "二级 3-1-text",
            label: "二级 3-1",
          },
          {
            id: 8 + "-" + (query || ""),
            text: "二级 3-2-text",
            label: "二级 3-2",
          },
        ],
      },
    ],
  });
}

// 静态树形数据
function useTreeAsyncResponse(request, response) {
  const { query } = request.body;
  uuid++;
  return response.$delay(100, {
    list: [
      {
        id: 3 + "-" + uuid,
        label: "节点" + (query || "") + uuid,
        text: "节点-text-" + (query || "") + uuid,
      },
    ],
  });
}

function getFromSelectListDataSource(request, response) {
  const { query } = request.body;
  return response.$delay(100, {
    list: Array.from({ length: 15 }).map((r, index) => ({
      label:
        index !== 0
          ? "选项" + (query ? "(" + query + ")" : "") + "-" + index
          : "测试tooltip的展示效果你好都发大水发射点发大水",
      value: "key" + (query ? "(" + query + ")" : "") + "-" + index,
    })),
  });
}

// 下拉表格数据
function useSelectTableResponse(request, response) {
  const { current, pageSize, query } = request.body;
  response.$delay(100, {
    total: 100,
    list: Array.from({ length: 10 }).map((r, index) => ({
      name: "202-" + index + (query || ""),
      creaater: "xiufu.wang-" + (current || ""),
      id: "k-" + index + (current ? "-" + current : ""),
    })),
  });
}

// 下拉分组 模拟数据
function useSelectGroupList(request, response) {
  response.$delay(100, {
    list: [
      { group: "男", name: "张山", id: "1" },
      { group: "男", name: "李四", id: "2" },
      { group: "女", name: "张珊", id: "3" },
      { group: "女", name: "李世", id: "4" },
      { group: "女", name: "张珊", id: "5" },
      { group: "女", name: "李世", id: "6" },
      { group: "女", name: "张珊", id: "7" },
      { group: "女", name: "李世", id: "8" },
      { group: "女", name: "张珊", id: "9" },
      { group: "女", name: "李世", id: "10" },
      { group: "女", name: "张珊", id: "11" },
      { group: "女", name: "李世", id: "12" },
      { group: "女", name: "张珊", id: "13" },
      { group: "女", name: "李世", id: "14" },
      { group: "女", name: "张珊", id: "15" },
      { group: "女", name: "李世", id: "16" },
    ],
  });
}

//下拉级联数据 --静态
function useCascaderDataSource(request, response) {
  response.$delay(100, {
    list: [
      {
        value: "zhinan",
        label: "指南",
        children: [
          {
            value: "shejiyuanze",
            label: "设计原则",
            children: [
              { value: "yizhi", label: "一致1111111111111111" },
              { value: "fankui", label: "反馈" },
              { value: "xiaolv", label: "效率" },
              { value: "kekong", label: "可控" },
            ],
          },
          {
            value: "daohang",
            label: "导航",
            children: [
              { value: "cexiangdaohang", label: "侧向导航" },
              { value: "dingbudaohang", label: "顶部导航" },
            ],
          },
        ],
      },
      {
        value: "zujian",
        label: "组件",
        children: [
          {
            value: "basic",
            label: "Basic",
            children: [
              {
                value: "layout",
                label: "Layout 布局",
              },
              {
                value: "color",
                label: "Color 色彩",
              },
              {
                value: "typography",
                label: "Typography 字体",
              },
              {
                value: "icon",
                label: "Icon 图标",
              },
              {
                value: "button",
                label: "Button 按钮",
              },
            ],
          },
          {
            value: "form",
            label: "Form",
            children: [
              {
                value: "radio",
                label: "Radio 单选框",
              },
              {
                value: "checkbox",
                label: "Checkbox 多选框",
              },
              {
                value: "input",
                label: "Input 输入框",
              },
              {
                value: "input-number",
                label: "InputNumber 计数器",
              },
              {
                value: "select",
                label: "Select 选择器",
              },
              {
                value: "cascader",
                label: "Cascader 级联选择器",
              },
              {
                value: "switch",
                label: "Switch 开关",
              },
              {
                value: "slider",
                label: "Slider 滑块",
              },
              {
                value: "time-picker",
                label: "TimePicker 时间选择器",
              },
              {
                value: "date-picker",
                label: "DatePicker 日期选择器",
              },
              {
                value: "datetime-picker",
                label: "DateTimePicker 日期时间选择器",
              },
              {
                value: "upload",
                label: "Upload 上传",
              },
              {
                value: "rate",
                label: "Rate 评分",
              },
              {
                value: "form",
                label: "Form 表单",
              },
            ],
          },
          {
            value: "data",
            label: "Data",
            children: [
              {
                value: "table",
                label: "Table 表格",
              },
              {
                value: "tag",
                label: "Tag 标签",
              },
              {
                value: "progress",
                label: "Progress 进度条",
              },
              {
                value: "tree",
                label: "Tree 树形控件",
              },
              {
                value: "pagination",
                label: "Pagination 分页",
              },
              {
                value: "badge",
                label: "Badge 标记",
              },
            ],
          },
          {
            value: "notice",
            label: "Notice",
            children: [
              {
                value: "alert",
                label: "Alert 警告",
              },
              {
                value: "loading",
                label: "Loading 加载",
              },
              {
                value: "message",
                label: "Message 消息提示",
              },
              {
                value: "message-box",
                label: "MessageBox 弹框",
              },
              {
                value: "notification",
                label: "Notification 通知",
              },
            ],
          },
          {
            value: "navigation",
            label: "Navigation",
            children: [
              {
                value: "menu",
                label: "NavMenu 导航菜单",
              },
              {
                value: "tabs",
                label: "Tabs 标签页",
              },
              {
                value: "breadcrumb",
                label: "Breadcrumb 面包屑",
              },
              {
                value: "dropdown",
                label: "Dropdown 下拉菜单",
              },
              {
                value: "steps",
                label: "Steps 步骤条",
              },
            ],
          },
          {
            value: "others",
            label: "Others",
            children: [
              {
                value: "dialog",
                label: "Dialog 对话框",
              },
              {
                value: "tooltip",
                label: "Tooltip 文字提示",
              },
              {
                value: "popover",
                label: "Popover 弹出框",
              },
              {
                value: "card",
                label: "Card 卡片",
              },
              {
                value: "carousel",
                label: "Carousel 走马灯",
              },
              {
                value: "collapse",
                label: "Collapse 折叠面板",
              },
            ],
          },
        ],
      },
      {
        value: "ziyuan",
        label: "资源",
        children: [
          {
            value: "axure",
            label: "Axure Components",
          },
          {
            value: "sketch",
            label: "Sketch Templates",
          },
          {
            value: "jiaohu",
            label: "组件交互文档",
          },
        ],
      },
    ],
  });
}

//下拉级联数据-lazy
function useCascaderLazyDataSource(request, response) {
  const { query, level } = request.body;
  const _query = query || "";
  response.$delay(200, {
    list: Array.from({ length: 10 }).map((r, index) => ({
      value: `key-${index}-${_query}`,
      label: `选项-${index}`,
      leaf: level === 3,
    })),
  });
}

// 测试array tree
function useTreeArrayDataSource(request, response) {
  response.$delay(200, {
    list: [
      { id: 1, text: "一年级", pid: null, leaf: 2 },
      { id: 2, text: "张山", pid: 1, leaf: 1 },
    ],
  });
}

// autoCompelete查询 mock
function useResponseAutoCompelete(request, response) {
  const { query } = request.body;
  if (query === "11") {
    return response.json({
      list: [],
    });
  }
  response.$delay(100, {
    list: [
      {
        value: "选项1-" + (query || ""),
      },
      {
        value: "选项2-" + (query || ""),
      },
      {
        value: "选项3-" + (query || ""),
      },
      {
        value: "选项4-" + (query || ""),
      },
    ],
  });
}
const isFree = true;
export default {
  mixins: [
    dataSource("ccccccccccccccccc", "/mock/getAsyncSelectTreeList", {
      lazy: true,
      // children字段名称，如果为children 可不必配置
      childrenField: "children",
      //数据路径
      dataField: "list",
      //转换： 必须存在id、value、label、isLeaf字段，如果数据满足该规范，则无需配置
      fieldMap: {
        id: "id",
        label: "name",
        value: "id",
        isLeaf: "isLeaf",
      },
    }),
    dataSource(
      "getDataSourceTags",
      Array.from({
        length: 40,
      }).map((r, index) => ({
        label: "宏观政策",
        value: index,
      })),
      {
        freeze: isFree,
      }
    ),
    dataSource(
      "testDatasourcex1",
      { name: "mars-pro-name", code: "mars-pro-code" },
      { freeze: isFree }
    ),
    dataSource("testDatasourcex2", "YES_OR_NOT", { freeze: isFree }),
    dataSource("testDatasourcex3", "/mock/getStaticSelectList", {
      freeze: isFree,
    }),
    dataSource("testDatasourcex3001", "/mock/getStaticSelectList", {
      dataField: "list",
      freeze: isFree,
      fieldMap: { name: "label", code: "value" },
    }),
    dataSource("testDatasourcex4", "getLocalSelectDatas", {}),
    dataSource("testDatasourcex5", "/mock/getStaticSelectList", {
      dataField: "list",
      freeze: isFree,
    }),
    ProConfigProvideMixin,
    // table
    dataSource(
      "staticFunctionTableSelectList",
      "getStaticFunctionTableSelectList",
      {
        enablePagination: true,
        dataField: "list",
        freeze: isFree,
      }
    ),
    dataSource(
      "staticServerTableSelectList",
      "/mock/getStaticServerTableSelectList",
      {
        enablePagination: true,
        dataField: "list",
        freeze: isFree,
      }
    ),
    dataSource("staticDictTableSelectList", "STATIC_DICT_TABLE_SELECT_LIST", {
      enablePagination: true,
      dataField: "list",
      freeze: isFree,
    }),
    dataSource(
      "staticTableSelectList",
      {
        list: Array.from({ length: 10 }).map((r, index) => ({
          label: "选项" + index,
          value: index,
          remark: "备注信息",
        })),
        total: 100,
      },
      {
        enablePagination: true,
        dataField: "list",
        freeze: isFree,
      }
    ),
    //groupList
    dataSource(
      "staticFunctionSelectGroupList",
      "getStaticFunctionSelectGroupList",
      {
        freeze: isFree,
      }
    ),
    dataSource(
      "staticServerGroupSelectList",
      "/mock/getStaticServerGroupSelectList",
      { dataField: "list", freeze: isFree }
    ),
    dataSource(
      "staticGroupSelectList",
      Array.from({ length: 12 }).map((r, index) => ({
        sex: index > 4 ? "男" : "女",
        label: "选项" + index,
        value: index,
      })),
      {
        freeze: isFree,
      }
    ),
    dataSource("getLazySelectTree", "/mock/geLazySelectTree", {
      dataField: "list",
      freeze: isFree,
      cascaderParams: (node) => ({ level: node.level }),
    }),
    dataSource("staticDictGroupSelectList", "STATIC_DICT_SELECT_GROUPLIST", {
      freeze: isFree,
    }),
    // tree
    dataSource("getStaticFunctionSelectTree", "staticFunctionSelectTree", {
      freeze: isFree,
    }),
    dataSource("staticServerSelectTree", "/mock/getStaticSelecttTree", {
      dataField: "list",
      freeze: isFree,
    }),
    dataSource("staticDictSelectTree", "STATIC_DICT_SELECT_TREE", {
      freeze: isFree,
    }),
    dataSource(
      "staticSelectTree",
      Array.from({ length: 4 }).map((r, index) => ({
        value: `${index}`,
        label: "节点-" + index,
        leaf: false,
        children: Array.from({ length: 3 }).map((r, j) => ({
          value: `${index}-${j}`,
          label: "节点-" + index + "-" + j,
          leaf: true,
        })),
      })),
      {
        freeze: isFree,
      }
    ),

    dataSource(
      "staticServerQuerySelectList",
      "/mock/getStaticQuerySelectList",
      {
        singleQueryField: "query",
        dataField: "list",
        freeze: isFree,
      }
    ),
    dataSource(
      "staticSelectList",
      Array.from({ length: 15 }).map((r, index) => ({
        sex: index > 1 ? "男" : "女",
        pid: index === 0 ? null : 1,
        leaf: index === 0 ? -1 : 1,
        label: "选项" + index,
        value: index,
      })),
      {
        freeze: isFree,
      }
    ),
    dataSource("staticDictSelectList", "STATIC_SELECT_LIST", {
      freeze: isFree,
    }),
    dataSource("staticServerSelectList", "/mock/getStaticSelectList", {
      dataField: "list",
      freeze: isFree,
    }),
    dataSource("staticFunctionSelectList", "getStaticFunctionSelectList", {
      dataField: "list",
      freeze: isFree,
    }),
    dataSource(
      "useTreeArrayDataSource",
      post("/mock/post").mockData(useTreeArrayDataSource),
      {
        freeze: isFree,
        dataField: "list",
        arrayToTree: {
          id: "id",
          parent: "pid",
          leaf: "leaf",
          leafValue: 1,
          returnArrayWhenOnRoot: true,
        },
        fieldMap: {
          value: "id",
          children1: "children",
          hasChildren: "leaf",
        },
        childrenField: "children",
      }
    ),
    dataSource("getDataSource", "/mock/get", { freeze: isFree }),
    dataSource("getDataSource1", "/mock/get", { lazy: true, freeze: isFree }),
    dataSource("getDataSource2", "/mock/get", {
      dataField: "list",
      freeze: isFree,
      lazy: true,
      fieldMap: { label: "name", value: "code" },
    }),
    dataSource("getDataSource3", "/mock/get", {
      dataField: "treeDataObject",
      childrenField: "children",
      lazy: true,
      freeze: isFree,
      fieldMap: { label: "name", value: "code" },
    }),
    dataSource("getDataSource4", "/mock/get", {
      dataField: "treeDataArray",
      childrenField: "children",
      lazy: true,
      freeze: isFree,
      fieldMap: { label: "name", value: "code" },
    }),
    dataSource("getDataSourcemultiple1", "cccccccccccccc", {
      multiple: true,
      freeze: isFree,
      lazy: true,
      transformData: "transformData111",
    }),
    // target function
    dataSource(
      "getDataSource1234",
      function ({ target, options, params }) {
        const query = params.query || "-empty";
        return { list: [{ name: "选项111-" + query }] };
      },
      {
        freeze: isFree,
        lazy: true,
        dataField: "list",
        fieldMap: { value: "name" },
        params: "pageComputedParams",
      }
    ),
    // 如果是前端过滤，建议通过minx
    dataSource("getDataSource12345", "getProcList", {
      lazy: true,
      freeze: isFree,
      params: { staName: "123" },
      dataField: "list",
      fieldMap: { value: "name" },
    }),
    dataSource("getDataSourceTable", post("/mock/post").mockData(useResponse), {
      dataField: "list",
      multiple: true,
      freeze: isFree,
      enablePagination: true,
    }),
    //静态树数据
    dataSource(
      "getDataSourceTreeTable",
      post("/mock/post").mockData(useResponseTree),
      { dataField: "list", enablePagination: true, freeze: isFree }
    ),
    //按需加载tree Table数据
    dataSource(
      "getDataSourceAsyncTreeTable",
      post("/mock/post").mockData(useResponseAsyncTree),
      { dataField: "list", enablePagination: true, freeze: isFree }
    ),
    //分组footer统计
    dataSource(
      "getDataSourceGroupTable",
      post("/mock/post").mockData(useResponse),
      {
        dataField: "list",
        multiple: true,
        summaryDataField: "summary",
        freeze: isFree,
      }
    ),
    dataSource(
      "getDataSourceRowGroupTable",
      post("/mock/post").mockData(useResponse),
      {
        dataField: "list",
        groupField: ["year", "month", "day"],
        freeze: isFree,
      }
    ),
    dataSource(
      "getTreeDataSource",
      post("/mock/post").mockData(useTreeResponse),
      {
        freeze: isFree,
        dataField: "list",
        childrenField: "children",
        fieldMap: { label: "text", value: "id" },
      }
    ),
    dataSource(
      "getTreeDataAsyncSource",
      post("/mock/post").mockData(useTreeAsyncResponse),
      {
        freeze: isFree,
        lazy: true,
        dataField: "list",
        childrenField: "children",
        fieldMap: { label: "text" },
      }
    ),
    //表单测试数据源测试
    //---字典
    dataSource("getFromDictDataSource", "system.YES_OR_NOT", {
      fieldMap: { label: "name", value: "code" },
      freeze: isFree,
    }),
    //--静态
    dataSource(
      "getFromStaticDataSource",
      [
        { name: "是-系统", code: "1" },
        { name: "否-系统", code: "2" },
        { name: "不确定-系统", code: "3" },
        { name: "未知-系统", code: "4" },
      ],
      { fieldMap: { label: "name", value: "code" }, freeze: isFree }
    ),
    //--来自与context中的静态数据
    dataSource(
      "getFromContextStaticDataSource",
      "getFromStaticDataSourceDatas",
      { fieldMap: { label: "name", value: "code" }, freeze: isFree }
    ),
    dataSource(
      "getFromSelectListDataSource",
      post("/mock/post").mockData(getFromSelectListDataSource),
      { freeze: isFree, dataField: "list" }
    ),
    dataSource(
      "getFromSelectTableDataSource",
      post("/mock/post").mockData(useSelectTableResponse),
      {
        freeze: isFree,
        dataField: "list",
        enablePagination: true,
        fieldMap: { label: "name", value: "id" },
      }
    ),
    dataSource(
      "getFromSelectGroupList",
      post("/mock/post").mockData(useSelectGroupList),
      {
        freeze: isFree,
        dataField: "list",
        fieldMap: { label: "name", value: "id" },
      }
    ),
    dataSource(
      "getFromSelectCascaderDataSource",
      post("/mock/post").mockData(useCascaderDataSource),
      { freeze: isFree, dataField: "list", multiple: true }
    ),
    dataSource(
      "getFromSelectCascaderLazyDataSource",
      post("/mock/post").mockData(useCascaderLazyDataSource),
      {
        freeze: isFree,
        lazy: true,
        dataField: "list",
        cascaderParams: (node) => ({ level: node.level }),
      }
    ),
    dataSource(
      "useResponseAutoCompelete",
      post("/mock/post").mockData(useResponseAutoCompelete),
      { freeze: isFree, dataField: "list" }
    ),
  ],
  components: {
    IconComponent,
    onlineRender,
  },
  created() {
    this.getFromStaticDataSourceDatas = [
      { name: "是-系统", code: "1" },
      { name: "否-系统", code: "2" },
      { name: "不确定", code: "3" },
      { name: "未知", code: "4" },
    ];
    setTimeout(() => {
      this.selectRadioValue31 = "layout";
    }, 5000);
  },
  props: {
    cccccccccccccc: {
      type: String,
      default: "/mock/get",
    },
  },
  computed: {
    pageComputedParams() {
      return { computedName: "123" };
    },
  },
  data() {
    this.xpromise = window.Promise;
    console.log("http ok for: ");
    return {
      selectTableCcolumns: selectTableCcolumns,
      affixvalue: 1,
      resizeChange: 1,
      resizeHeight: "50px",
      fullHeight: "50px",
      //radios
      selectRadioValue1: null,
      selectRadioValue2: "2",
      selectRadioValue3: null,
      selectRadioValue4: null,
      selectRadioValue5: null,
      selectRadioValue6: null,
      selectRadioValue7: null,
      selectRadioValue8: ["3", "1"],
      selectRadioValue9: null,
      selectRadioValue10: null,
      selectRadioValue11: null,
      selectRadioValue12: null,
      selectRadioValue13: null,
      selectRadioValue14: { value: "key-3", label: "选项3" },
      selectRadioValue141: null,
      selectRadioValue142: null,
      selectRadioValue143: { value: "key-3", label: "选项3" },
      selectRadioValue144: null,
      selectRadioValue145: null,
      selectRadioValue146: null,
      selectRadioValue147: null,
      selectRadioValue148: null,
      selectRadioValue15: "5-",
      selectRadioValue16: null,
      selectRadioValue17: ["9-", "10-", "5-", "6-"],
      selectRadioValue18: ["1-", "4-", "9-", "10-"],
      selectRadioValue19: ["k-0-1", "k-2-1", "k-5-1"],
      selectRadioValue20: ["k-5-2", "k-3-2"],
      selectRadioValue21: "k-0-1",
      selectRadioValue22: "3",
      selectRadioValue23: "1",
      selectRadioValue24: "7",
      selectRadioValue25: ["5", "4"],
      selectRadioValue26: ["4", "1"],
      selectRadioValue27: ["1", "2"],
      selectRadioValue28: ["key-12", "key-4"],
      selectRadioValue29: ["key-9", "key-3", "key-13", "key-6"],
      selectRadioValue30: "yizhi",
      selectRadioValue31: null,
      selectRadioValue32: null,
      selectRadioValue33: ["yizhi", "fankui"],
      selectRadioValue34: null,
      selectRadioValue35: null,
      selectRadioValue36: null,
      selectRadioValue37: null,
      selectRadioValue38: null,
      selectNodes1: "10-",
      selectNodes2: ["5-", "7-"],
      selectRows6: null,
      selectRows7: null,
      selectRows: "a-6-1",
      selectRows1: [
        { year: "2023", month: "1", day: "1", max: 10, min: 20, id: "a-7-1" },
        { year: "2022", month: "1", day: "1", max: 10, min: 20, id: "a-4-1" },
      ],
      selectRows2: null,
      colconfigs: colconfigs,
      colconfigs1: colconfigs1,
      groupColConfigs: groupColConfigs,
      hidenCol: false,
      columnCount: 3,
      gutter1: 10,
      input: "Hello Element UI!",
      httpResponse: "",
      httpResponse1: "",
      httpResponse2: "",
      autocompleteVal: "",
      autocompleteVal1: "",
      yvalue: "1",
      svalue: "2",
      myRules: {
        value1: [vRequired("不能为空")],
        value2: [vRequired("不能为空")],
        value3: [vRequired("不能为空")],
        value4: [vRequired("不能为空")],
      },
      //创建也给表单模型model
      form: createState({ model: {}, searcModel: {} }),
      //创建也给表单模型model
      testpattern: /^139/,
      test: createState({ data: {} }),
      test2: createState({
        data: {
          text2: `<span>aaaaaaaa<b>你好,我今天要出去</b>aaaaaa<span>bbbbbbbbbbbbbbbbbbbbbbbb</span><span>cccccccccccccccccccccccccccccccccc</span><span>dddddddddddddddddddddddddddddddddd</span><span>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span></span>`,
          text3: `<span><span>bb<b>你好,我今天要出去</b>bbb</span></span>`,
          //测试明细表单数据
          detalDatas: [],
          detalDatas1: [],
          detalData2s: [],
          detalData3s: [],
        },
      }),
      test1: createState({
        data: {
          selectvcascader1: "3-1",
          selectvcascader2: "2-1",
          selectvcascader3: "1-1",
          selectvcascader4: "0-1",
          selectvtable3tb: [2, 3],
          selectvtable3: 2,
          selectvtable1tb: [2, 3],
          selectvtable1: 2,
          selectvchecks1: [2, 8],
          selectvradios1: 1,
          selectvgroup1g: [8, 7],
          selectvgroup2g: [6, 7],
          selectvgroup3g: [2, 7],
          selectvgroup4g: [4, 7],
          selectvgroup1: 8,
          selectvgroup2: 7,
          selectvgroup3: 6,
          selectvgroup4: 5,
          selectvtree1: "2-1",
          selectvtree2: "2-1",
          selectvtree3: "2-1",
          selectvtree4: "2-1",
          selectvtree1m: ["2-1", "3-1"],
          selectvtree2m: ["2-1", "3-1"],
          selectvtree3m: ["2-1", "3-1"],
          selectvtree4m: ["2-1", "3-1"],
          selectVv3: 3,
          selectVv31: [2, 3],
          selectVv2: 2,
          selectVv21: [2, 3],
          selectVv1: { value1: 1, label: "选项1" },
          selectVv11: [
            { value: 2, label: "选项2" },
            { value: 3, label: "选项3" },
          ],
          selectv1: 3,
          selectv2: 2,
          selectv3: 1,
          selectv4: 0,
          a61111111111: 110000,
          a61111111111111: "2022-12-12",
          a6111111111111111: "10:00",
          a61111111111111111: [123, 456],
          a6111111111111111111: ["2022-08-03 12:00:00", "2022-09-12 12:00:00"],
          a61111111111111112: "10:30:17",
        },
      }),
    };
  },
  methods: {
    getLocalSelectDatas() {
      return {
        name: "mars-pro-name",
        code: "mars-pro-code",
      };
    },
    uploadCallback() {
      this.$alert("导入成功");
    },
    renderItem1({ index, prop, value, propModel }) {
      return {
        vShow: !(propModel.name === "1" && prop === "name1"),
      };
    },
    handleItemChange(v) {
      console.log("-----------------------", v);
    },
    onReflow(e) {
      console.log("是否限制:", e);
    },
    applyValue(key, value) {
      this.test1.data[key] = value;
    },
    getStaticFunctionTableSelectList() {
      return {
        list: Array.from({ length: 10 }).map((r, index) => ({
          label: "选项" + index,
          value: index,
          remark: "备注信息",
        })),
        total: 100,
      };
    },
    getStaticFunctionSelectGroupList() {
      return Array.from({ length: 12 }).map((r, index) => ({
        sex: index > 4 ? "男" : "女",
        label: "选项" + index,
        value: index,
      }));
    },
    staticFunctionSelectTree() {
      return Array.from({ length: 4 }).map((r, index) => ({
        value: `${index}`,
        label: "节点-" + index,
        leaf: false,
        children: Array.from({ length: 3 }).map((r, j) => ({
          value: `${index}-${j}`,
          label: "节点-" + index + "-" + j,
          leaf: true,
        })),
      }));
    },
    getStaticFunctionSelectList() {
      return {
        list: Array.from({ length: 15 }).map((r, index) => ({
          label: "选项" + index,
          value: index,
        })),
      };
    },
    aaaaaacaa() {
      console.log("customerCallback");
    },
    transformData111(data) {
      console.log("----------------", data);
      return data;
    },
    doResize(size) {
      this.resizeChange++;
    },
    changeResizeHeight() {
      this.resizeHeight = parseInt(this.resizeHeight) + 30 + "px";
      const iv = parseInt(this.resizeHeight);
      if (iv > 200) {
        this.resizeHeight = "50px";
      }
    },
    changeFullHeight() {
      this.fullHeight = parseInt(this.fullHeight) + 30 + "px";
      const iv = parseInt(this.fullHeight);
      if (iv > 200) {
        this.fullHeight = "50px";
      }
    },
    //建议将通用的前端业务api单独封装成一个mixin
    async getProcList({ target, options, params }) {
      const createFilter = (restaurants, queryString) => {
        const newrestaurants = restaurants.filter((item) => {
          return item.name.indexOf(queryString) != -1;
        });
        return newrestaurants;
      };
      if (this.datasss) {
        const datasss = JSON.parse(JSON.stringify(this.datasss));
        var restaurants = options.dataField
          ? this.datasss[options.dataField]
          : this.datasss;
        var results = params.query
          ? createFilter(restaurants, params.query)
          : restaurants;
        datasss[options.dataField] = results;
        return datasss;
      } else {
        const { response } = await get("/mock/get").done();
        this.datasss = response.data;
        return response.data;
      }
    },
    async doGet() {
      const { response } = await get("/mock/get", { param: "mars-pro" }).done();
      this.httpResponse = response;
    },
    async doPost() {
      const { response } = await post("/mock/post", {
        param: "mars-pro",
      }).done();
      this.httpResponse1 = response;
    },
    async doPostForm() {
      const { response } = await get("/mock/postForm", {
        param: "mars-pro",
      }).done();
      this.httpResponse2 = response;
    },
    doHandle(command, e) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 1000);
      });
    },
    doHandler1(command) {
      alert(command);
    },
    doValidate() {
      this.$refs.myform
        .validate()
        .catch(() => {
          this.$proMessage("表单校验失败");
          return false;
        })
        .then((res) => {
          if (res !== false) {
            this.$proMessage("表单校验成功");
          }
        });
    },
  },
};
</script>
<style>
.pro-demo .show-border .pro-select-checks .pro-layout-contaner-item {
  border: 1px solid #e2dcdc;
}
</style>